当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。
1. template
<el-table :data="tableData">
<el-table-column
v-for="item in tableHead"
:key="item.id"
:prop="item.id"
:label="item.name"
></el-table-column>
</el-table>
注: tableHead是表头数据,tableData是表格数据。
2.data 数据:
data() {
return {
//表头
tableHead: [
{
id: 'time',
name: '时间',
checked: true, //默认选中
},
{
id: 'number',
name: '数量',
checked: false, //默认不选
},
],
//表中数据
tableData: [
time: '',
number: '',
]
}
},
注: 因为el-table表格中的数据是通过prop绑定的,所以利用:prop="item.id"
,而item.id指向tableData中的数据,所以表格拿到了数据。(tableHead中的id和tableData中的键名是对应的)