element-plus中动态表头，返回数据和表头匹配

#在必要的时候需要进行动态表头但是后端无法做到数据和表头进行一一对应，这时候需要我们自己去进行匹配

#例如:表头中有很多同一属性然后table的数据需要根据匹配是哪一个同一属性然后再那个框下面进行显示

后端返回的表头是这样的

数据源是这样的

 

需要对表头和数据中的币种类型进行匹配然后再对应的币种下面显示goodsvalue

 实现：

javascript

//获取数据
let res = await danZhengBuPurchaseVolumeService.queryList(data);

//这里表示对表头进行处理 for in 得到的是key
    for(let key in res.data.headModel){
        state.agent.fieldList.push({label: res.data.headModel[key], value: key}) //将获取到的数据进行push
    }

//下面对数据进行处理listModel是一个数组，数组中是一个对象
    res.data.listModel.map(i=>{

        let row:any = {};
//对数组中的每一个对象进行遍历
        for(let key in i){
//如果恰好是需要进行匹配的数据
            if(key == 'currencyName'){
//在再次遍历表头数据key
                for(let headKey in res.data.headModel){
//如果得到的Key包含了数组对象中的key 并且 表头数据的值等于每一项中currencyName的值的话
                    if(headKey.indexOf(key) != -1 && res.data.headModel[headKey] == i[key]){
// 这一行的值等于res.data.listModel中的goodsValue
                        row[headKey] = i.goodsValue;
                    }
                }
//剩余的情况那么就直接相等就直接push进去
            }else{
                if(res.data.headModel[key]){
                    row[key] = i[key];
                }
            }
        }
//table数据进行添加
        state.agent.tableData.push(row);
    })

vue

效果

目录

 实现：

---