VUE使用Element-ui表达式拼接字符串 el-table-column的prop拼接字符串

描述

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

表达式字符串拼接

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

    data() {
      return {
        city:""
      }
    },

:label标签数据：

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

效果：

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
			}
		]
      }
    }

未拼接的标签：

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

效果：

拼接后的标签：

<el-table :data="allList">
	<el-table-column label="月份" prop="yearsMonth">
	  <template slot-scope="scope">
	    {{scope.row.yearsMonth}}月
	  </template>
	</el-table-column>
</el-table>

效果：