标签:temp idt 自定义显示 另一个 eth 部分 column ase 单元格
基本使用都不多说了,
我们知道这个表格组件,每个单元格内容是table绑定的data中的某个属性决定的,但是如果我们想根据这个属性值,渲染出另一个值呢,首先问题来了,我如何获得当前列的值,
查了查,我们可以用插槽来自定义显示的内容
template
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column label="姓名" width="180"> <template slot-scope="scope"> {{aa(scope.row.name)+scope.$index}} </template> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
data
tableData: [{ date: ‘2016-05-02‘, name: ‘小明‘, address: ‘上海市普陀区金沙江路 1518 弄‘ }, { date: ‘2016-05-04‘, name: ‘小超‘, address: ‘上海市普陀区金沙江路 1517 弄‘ }, { date: ‘2016-05-01‘, name: ‘小虎‘, address: ‘上海市普陀区金沙江路 1519 弄‘ }, { date: ‘2016-05-03‘, name: ‘王虎‘, address: ‘上海市普陀区金沙江路 1516 弄‘ }]
methods
aa(name){ var str=‘‘ switch(name) { case ‘小明‘: str="哈哈" break; default: str=name; } return str; }
上诉代码,template中黄色部分就是自定义单元格内容的方式(具名插槽)
scope.row:可以取到当前列的所有数据
scope.$index:是当前列的索引
上诉代码的一个作用是,当列的name属性是小明时,在该单元格显示“哈哈”
element-ui中el-table表格的使用(如何取到当前列的所有数据)
标签:temp idt 自定义显示 另一个 eth 部分 column ase 单元格
原文地址:https://www.cnblogs.com/fqh123/p/11183270.html