el-table简洁之道

前端没钱2024-08-17 17:50

说明

环境：vue2 + elementui2.15.14

正常写el-table时，像官方示例一样：

javascript 复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      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 弄'
        }
      ]
    }
  }
}
</script>

那么，如果tableData中再有一个data字段，且data字段里又包含其他字段需要展示呢，像下面这样：

javascript 复制代码

{
  date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1516 弄',
   data: {
     sex: '雄性',
     age: 18,
     money: '100万',
   }
 }

新增加的这几个字段，你是这样写的吗

javascript 复制代码

 <el-table-column label="性别">
   <template v-slot="scope">{{ scope.row.data.sex }}</template>
 </el-table-column>
 <el-table-column label="年龄">
   <template v-slot="scope">{{ scope.row.data.age }}</template>
 </el-table-column>
 <el-table-column label="财富">
   <template v-slot="scope">{{ scope.row.data.money }}</template>
 </el-table-column>

这样写有2个弊端

不够简洁
如果哪条数据没有data这个字段，那么会报错

建议写法如下

javascript 复制代码

<el-table-column prop="data.sex" label="性别"/>
<el-table-column prop="data.age" label="年龄"/>
<el-table-column prop="data.money" label="财富"/>