el-table简洁之道

说明

环境：vue2 + elementui2.15.14
正常写el-table时，像官方示例一样：

<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字段里又包含其他字段需要展示呢，像下面这样：

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

---

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

 <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这个字段，那么会报错

---

建议写法如下

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