关于element:记录Element表格动态表头及数据

50次阅读

共计 1088 个字符,预计需要花费 3 分钟才能阅读完成。

实现形式
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;
  }
}

正文完
 0