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 表格头多出一列

element-ui el-table 表格头多出一列

element-ui中el-table(隔行换色,复选框回显)

[element-ui] el-table 表格吸底 固定最后一行

(element-ui)取消el-table的hover状态,取消高亮显示