el-table动态表头，动态数据处理

最新推荐文章于 2025-04-28 14:06:58 发布

_不是惊风

最新推荐文章于 2025-04-28 14:06:58 发布

阅读量5.7k

点赞数 2

分类专栏： vue elementui 文章标签： vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_43240445/article/details/122323803

版权

vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

elementui

7 篇文章

订阅专栏

这篇博客讲述了在Vue.js中处理动态表格数据的挑战，特别是当后端返回的数据不完整时，如何对应表头并正确显示数据。博主通过示例代码展示了如何映射数据到动态生成的表格列，并使用JSON操作确保数据与表头位置匹配。文章强调了在前端开发中灵活处理动态数据的重要性。

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

在el-table中遇到一个有意思的数据处理，以下数据表头为动态的数据
在这里插入图片描述

此数据表头处理比较简单，难点在于表头对应的数据，当后端返回的数据只有部分时，如只有温度就返回温度，只有PM2.5就只返回PM2.5,而且后端没有返回其他没有的字段的默认值，此时我们就需要对数据进行处理对应好数据所在的位置不然则会出现PM2.5的值跑到了温度下面

<el-table>
	<el-table-column align="center" label="序号" type="index">
	</el-table-column>
	<el-table-column align="center" label="时间" prop="time">
	</el-table-column>
	<!-- 此处就是动态表头的处理 -->
	<el-table-column
	    align="center"
	    :label="item.attr_name"
	    v-for="(item, index) in deviceTypeInfo.attributes"
	    :key="item.id"
	>
	    <template slot-scope="scope">
	        <span>{{
	            scope.row.value[index]
	                ? scope.row.value[index].value
	                : " "
	        }}</span>
	    </template>
	 </el-table-column>
 </el-table>

对数据的处理如下

let data = Object.keys(res.data.data).map((key) => {
     return { time: key, value: res.data.data[key] };
	});
let newData = JSON.parse(JSON.stringify(data));
//此处微数据处理
newData.map((items, value) => {
     let attrArr = [];
     items.value.map((item) => {
         let indexAttr =
             this.deviceTypeInfo.attributes.findIndex((indexItem) =>
             	item.attribute.attr === indexItem.attr
         );
         //根据数据对应的deviceTypeInfo.attributes数组的下标进行数据处理
         attrArr[indexAttr] = item;
     });
     //将处理过的items.value重新赋值 此时数据则会对应到表头的所对应的位置
     items.value = JSON.parse(JSON.stringify(attrArr));
 });
  this.valueList = newData;
  this.total = res.data.total;