标签：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
