vue处理动态表格的数据

场景

手机屏幕较小，要展示的表身体的字段太多，但是有很多又是无用数据。那我们就用表头的数量，来匹配表身体字段。匹配到就展示，匹配不到就不展示

原始数据格式

通过图，可以看出。表头是通过dataIndex来匹配表身体的字段。那我们就用键值对的形式来匹配数据

代码实现

   const filterRecommend = (rawData, header) => {
        const result = rawData.map((dataItem, index) => {
            const resultItem = {};
            header.map((headerItem, index) => {
                console.log("headerItem", headerItem.dataIndex);
                const key = headerItem.dataIndex;
                const value = dataItem[headerItem.dataIndex];
                console.log("key", key);
                resultItem[key] = value;
            });
            return resultItem;
        });
        return result;
    };

    const result = filterRecommend(rawData, header);

    console.log("result: \n" + JSON.stringify(result));

代码说明

就是key和value的关系
1：明确一点，表头是key；表身体是value
2：外层是map循环表身体。内层是map循环表头
3:将表头作为key。把表头的key，作为表身体的value。重新组成value。赋值给value
4：返回结果，直接调用