vue处理动态表格的数据

亦凉 2021-08-29 17:42 388阅读 0赞

### 场景 ###

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

### 原始数据格式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]

通过图，可以看出。表头是通过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：返回结果，直接调用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/0f900c8f9f4c482d859f5cd2d38f4364.png

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue09动态树+数据表格+分页模糊查

[14天阅读挑战赛][14] 努力是为了不平庸~ 目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通

ゝ一世哀愁。/ 2024年04月01日 11:32/ 0 赞/ 69 阅读

相关 vue.js动态表格增删改代码

新建一个html文件，内容如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8

ゞ浴缸里的玫瑰/ 2023年10月09日 11:05/ 0 赞/ 43 阅读

相关 VUE Element 动态表格

合并单元格，注意被抹去的单元格，需： return \{ rowspan: 0, colspan: 0\}; <!DOCTYPE html> <html la

深藏阁楼爱情的钟/ 2022年11月29日 11:51/ 0 赞/ 204 阅读

相关处理报表表格的数据显示

//CustAssignRateVO需重写hashCode和equals方法，equals方法按需要分组的字段重写，如地市编码latnCode。 /

╰半夏微凉°/ 2022年09月28日 13:20/ 0 赞/ 181 阅读

相关 VUE 之 Jspreadsheet CE电子表格数据处理

需求：将表格内容作为list集合，向后端传递注意：需求默认展示表格为30行空表格，后端接口会拦截空值，所以需将未输入的行去掉默认的Jspreadsheet ：![在

冷不防/ 2022年09月16日 03:43/ 0 赞/ 423 阅读

相关 JavaScript动态向表格添加数据

利用javascript ，动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspa

朴灿烈づ我的快乐病毒、/ 2022年07月11日 11:23/ 0 赞/ 340 阅读

相关 JS动态向表格添加数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

灰太狼/ 2022年04月15日 05:16/ 0 赞/ 487 阅读

相关 Mockjs生成Vue数据表格

1.npm install mockjs --save 2.在src文件下建mock.js文件 3.mock.js文件文件内容 1 //引入mockjs

素颜马尾好姑娘i/ 2022年04月10日 13:08/ 0 赞/ 343 阅读

相关 Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。  <link rel="stylesheet"

雨点打透心脏的1/2处/ 2022年03月17日 05:56/ 0 赞/ 1231 阅读

相关 vue处理动态表格的数据

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

亦凉/ 2021年08月29日 17:42/ 0 赞/ 389 阅读