码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui中el-table表格的使用(如何取到当前列的所有数据)

时间:2019-07-14 11:06:22      阅读:877      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!