Vue+Element ui 根据后台返回数据设置动态表头

最新推荐文章于 2024-03-29 17:26:58 发布

原创最新推荐文章于 2024-03-29 17:26:58 发布 · 6.7k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#element+Vue+table #动态表头 #根据后台返回数据设置表头

Vue项目专栏收录该内容

8 篇文章

订阅专栏

在处理后端不规范数据时，使用Vue和Element UI动态创建表头。通过prop绑定数据值，label设置表头，针对数组形式的返回数据，按下标匹配表头和值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
由于后端是多人开发，也没有规范数据格式，所有页面是我一个人开发，所以就会遇到同样的页面不同的返回数据格式问题。

一、根据element文档，利用prop属性绑定对应值，label绑定表头。

html

<el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%">                	
	<template v-for="(col,index) in cols">                    
	<el-table-column :prop="col.prop" :label="col.label"></el-table-column>                
	</template>              
</el-table>

返回的数据类型

data(): {
    return: {
    	   cols:[
    	   	   {prop: "327", label: "护士"}, 
    	   	   {prop: "328", label: "护理员组长"},
    	   	   {prop: "329", label: "护理员"},
    	   	   {prop: "330", label: "输单员"}
	    ],
	    tableData:[
	        {327: "24", 328: "20", 329: "18", 330: "2"},
	        {327: "22", 328: "20", 329: "18", 330: "2"},
	        {327: "22", 328: "20", 329: "18", 330: "2"},
	        {327: "51", 328: "21", 329: "20", 330: "6"},
	        {327: "21", 328: "20", 329: "18", 330: "2"},
	    ]
    }
}

二、返回的数据都是数组形式，值与表头按照数组下标相对应。

html

<el-table :data="table_content" border>                
	<el-table-column :label="val" v-for="(val, i) in table_head" :key="i">                  				
	<template slot-scope="scope">{{table_content[scope.$index][i]}}</template>                
	</el-table-column>              
</el-table>

返回的数据类型

data(): {
	return: {
		// 表头数据
		table_head:["护士", "护理员组长", "护理员", "输单员"],
		// 表格内容数据
		table_content:[
		    ["24", "20", "18", "2"], 
		    ["22", "20", "18", "2"],
		    ["22", "20", "18", "2"],
		    ["51", "21", "20", "6"],
		    ["21", "20", "18", "2"],
		],
		
	}
}