记录Element 表格动态表头及数据

Posted 2021-09-07 XiNine

实现方式
1、取数据列表中第一条作为表头数据，再遍历删除不是表头的固定属性，结果赋值给一个空对象；
2、把处理好的数据遍历 key 名 puah 进表头配置数组中，事先在写一个 key 名所对应的中文名方法返回中文名。

数据格式

/*表格数据*/
const dataList = [
    {
        name: "李小龙",
        age: 24,
        city: "深圳",
        gender: "男",
        education: "本科",
        hobby: "武术"
    },
    {
        name: "黄飞鸿",
        age: 25,
        city: "深圳",
        gender: "男",
        education: "本科",
        hobby: "武术"
    },
    {
        name: "陈真",
        age: 26,
        city: "深圳",
        gender: "男",
        education: "本科",
        hobby: "武术"
    },
    {
        name: "霍元甲",
        age: 26,
        city: "深圳",
        gender: "男",
        education: "本科",
        hobby: "武术"
    },
]

/*表头配置*/
const headConfig = {
    名字: "name",
    年龄: "age",
    性别: "gender"
}

实现方式1：删除不是表头配置的属性

function extractData(data, config) {
    const formHead = Object.values(config)
    data.forEach((item, index) => {
        Object.keys(item).forEach(item2 => {
            if (!formHead.includes(item2)) delete data[index][item2];
        })
    })
    return data;
}

实现方式2：匹配表头配置的属性 push 进新数组返回

function extractData(data, config) {
    const formHead = Object.values(config)
    const arr = [],obj={};
    data.forEach((item, index) => {
        Object.entries(item).forEach(item2 => {
            if (formHead.includes(item2[0])) obj[item2[0]] = item2[1]
        })
        arr.push(obj)
    })
    return arr;
}

匹配对象中指定属性

function mateData(data,config){
 const arr = []
 for (let [key, value] of Object.entries(config)) {
      if (data[key]) {
        arr.push({
          value: data[key],
          name: value
        });
      }
    }
    return arr;
  }
}