数据准备
json数据:
tableList: [
{
title: "数据A",
tableLabel: [
{ label: "col1", width: 60, prop: "name" },
{ label: "col2", width: 60, prop: "sex" },
{ label: "col3", width: 60, prop: "age" },
{ label: "col4", width: 60, prop: "age" },
],
tableData: [
{ name: "小明", sex: "男", age: 12 },
{ name: "小红", sex: "女", age: 10 },
{ name: "小李", sex: "男", age: 8 },
{ name: "小圆", sex: "aa", age: 112 },
],
},
{
title: "数据B",
tableLabel: [
{ label: "id", width: 60, prop: "id" },
{ label: "序列号", width: 100, prop: "num" },
{ label: "日期", width: 100, prop: "date" },
],
tableData: [
{ id: "1", num: "100", date: "2021-10-01" },
{ id: "2", num: "200", date: "2021-10-02" },
{ id: "3", num: "300", date: "2021-10-03" },
],
},
],
table定义
<el-table
:data="item.tableData"
border
v-for="(item, index) in tableList"
:key="index"
style="margin-bottom: 20px"
>
<el-table-column :label="item.title" align="center">
<el-table-column
v-for="(field, index) in item.tableLabel"
:key="index"
:prop="field.prop"
:label="field.label"
:height="field.height"
></el-table-column>
</el-table-column>
</el-table>