VUE使用Element-ui表达式拼接字符串 el-table-column的prop拼接字符串 拼接table 使用<template slot-scope="scope&quo

VUE使用Element-ui表达式拼接字符串 el-table-column的prop拼接字符串 使用<template slot-scope="scope"> 更改td里面值
https://blog.csdn.net/WindNolose/article/details/125422409

描述

VUE中的标签属性，可以在属性前使用：，让属性绑定到data中的动态数据
el-table-column标签可以使用prop配合:data实现表格渲染列表数据
业务需要我们对数据进行一些拼接的操作
比如月份，请求到的数据是纯数字，可是表格中应该显示 XX月才是正确的

表达式字符串拼接

这个其实很简单，直接使用加号即可，但是要注意单引号和双引号的区分
我们以:label为例，我们在城市后面拼接供电局字样
data数据：

    data() {
      return {
        city:""
      }
    },
1
2
3
4
5

:label标签数据：

    <el-table-column :label="city + '供电局'" />
1

效果：

table渲染绑定数据字符串拼接

如果是使用prop渲染的数据，那么字符串拼接上，只会认为这个值是你属性的值
正确的做法是使用template标签嵌套数据

我们以月份为例
data请求后的数据：

data() {
      return {
        allList:[
			{
				yearsMonth: 1
			},{
				yearsMonth: 2
			},{
				yearsMonth: 3
			},{
				yearsMonth: 4
			},{
				yearsMonth: 5
			},{
				yearsMonth: 6
			},{
				yearsMonth: 7
			},{
				yearsMonth: 8
			},{
				yearsMonth: 9
			},{
				yearsMonth: 10
			},{
				yearsMonth: 11
			},{
				yearsMonth: 12
			}
		]
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

未拼接的标签：

<el-table :data="allList">
	<el-table-column  label="月份"  prop="yearsMonth"/>
</el-table>
1
2
3

效果：

拼接后的标签：

<el-table :data="allList">
	<el-table-column label="月份" prop="yearsMonth">
	  <template slot-scope="scope">
	    {{scope.row.yearsMonth}}月
	  </template>
	</el-table-column>
</el-table>
1
2
3
4
5
6
7

效果：