基本使用都不多说了,
我们知道这个表格组件, 每个单元格内容是 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 属性是小明时, 在该单元格显示 "哈哈"
来源: http://www.bubuko.com/infodetail-3123074.html