elementui中table表格表头和列数据都是动态渲染
方法一:严格注意后台返回的数据结构
<el-table :data="formData.list_Row2" max-height="500px" :header-cell-style="{background:'#6062662b' ,color:'#606266'}">
<el-table-column align="center" v-for="(item, index) in formData.list_Col2" :key="index" :prop="item.prop"
:width="item.width" :label="item.label">
</el-table-column>
</el-table>
后台返回数据结构如下:prop关联
"list_Col2": [{
"label": "序号",
"prop": "Seq",
"width": "60"
}, {
"label": "记录时间",
"prop": "RecordTime",
"width": "150"
}, {
"label": "刮刀角度",
"prop": "Item0",
"width": null
}, {
"label": "刮刀压力",
"prop": "Item1",
"width": null
}, {
"label": "丝印检验",
"prop": "Item2",
"width": null
}],
"list_Row2": [{
"Seq": "1",
"RecordTime": "2022-08-23 09:22",
"Item0": "11",
"Item1": "22",
"Item2": "333"
}, {
"Seq": "2",
"RecordTime": "2022-08-23 09:22",
"Item0": "120",
"Item1": "-",
"Item2": "-"
}, {
"Seq": "3",
"RecordTime": "2022-08-23 09:21",
"Item0": "111",
"Item1": "-",
"Item2": "-"
}]
方法二:原生各自遍历,自行调整样式
<div class="table-title">
<div v-for="item in formData.list_Col" :title="item"><span>{{ item }}</span></div>
</div>
<div class="table-title" v-for="item in formData.list_Row">
<div :title="item" v-for="val in item"><span>{{ val }}</span></div>
</div>
后台返回数据结构:
"list_Col": ["序号", "记录时间", "刮刀角度", "刮刀压力", "丝印检验"],
"list_Row": [
["1", "2022-08-22 13:52:20", "56", "0.31", "-"],
["2", "2022-08-22 13:46:34", "55", "0.3", "-"],
["3", "2022-08-22 13:54:38", "-", "0.32", "-"]
],