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

在处理后端不规范数据时,使用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"],
		],
		
	}
}
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值