说明
环境: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="财富"/>