element-ui中el-table多层数组渲染问题

Posted 2023-04-17

参考技术A 如果你想要渲染的表格数据对象里面还有一层数组，类似下面这样的多层数据，该如何做呢？

实现方法如下：

效果图如下：

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属性是小明时，在该单元格显示“哈哈”