526互联

VUE使用Element-ui表达式拼接字符串 el-table-column的prop拼接字符串 拼接table 使用<template slot-scope="scope"> 更改td里面值

发布时间 2023-06-15 12:39:04作者: sunny123456

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

效果：
在这里插入图片描述