首页 > 其他分享 >elementui中table表格表头和列数据都是动态渲染

elementui中table表格表头和列数据都是动态渲染

时间:2022-08-23 09:47:05浏览次数:81  
标签:22 elementui 08 表头 prop width 2022 table label

方法一:严格注意后台返回的数据结构
<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", "-"]
		],

标签:22,elementui,08,表头,prop,width,2022,table,label
From: https://www.cnblogs.com/Fancy1486450630/p/16615039.html

相关文章