当前位置: 首页 > Web前端 > vue.js

[记录]元素表动态表头和数据

时间:2023-04-01 11:05:45 vue.js

实现方法1、将数据列表中的第一项作为表头数据,然后遍历删除非表头的固定属性,并将结果赋值给一个空对象;2.将处理后的数据遍历keynamepuah放入headerconfigurationarray中,预先写入对应keyname方法的中文名返回中文名。数据格式/*表数据*/constdataList=[{姓名:“李小龙”,年龄:24,城市:“深圳”,性别:“男”,学历:“本科”,爱好:“武术”},{name:"黄飞鸿",年龄:25,城市:"深圳",性别:"男",学历:"本科",爱好:"武术"},{name:"陈真",年龄:26,city:"深圳",gender:"男",学历:"本科",hobby:"武术"},{name:"霍元甲",年龄:26,city:"深圳",gender:"男",学历:"本科",hobby:"武术"},]/*header配置*/constheadConfig={name:"name",age:"age",gender:"gender"}实现方法一:删除属性没有在头函数中配置extractData(data,config){constformHead=Object.values(config)data.forEach((item,index)=>{Object.keys(item).forEach(item2=>{if(!formHead.includes(item2))删除数据a[索引][item2];})})returndata;}实现2:匹配表头配置的属性推入一个新数组returnfunctionextractData(data,config){constformHead=Object.values(config)constarr=[],obj={};data.forEach((item,index)=>{Object.entries(item).forEach(item2=>{if(formHead.includes(item2[0]))obj[item2[0]]=item2[1]})arr.push(obj)})returnarr;}匹配对象中的指定属性functionmateData(data,config){constarr=[]for(let[key,value]ofObject.entries(config)){if(data[key]){arr.push({value:data[key],name:value});}}返回arr;}}