element-ui中el-table表格的使用(如何取到当前列的所有数据)
Posted fqh123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui中el-table表格的使用(如何取到当前列的所有数据)相关的知识,希望对你有一定的参考价值。
基本使用都不多说了,
我们知道这个表格组件,每个单元格内容是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表格的使用(如何取到当前列的所有数据)的主要内容,如果未能解决你的问题,请参考以下文章
Vue——element-UI el-table表格根据搜索条件表格值改变颜色
element-ui中el-table(隔行换色,复选框回显)