一维数组变二维数组

Qing416439079

已于 2024-10-10 14:55:05 修改

阅读量709

点赞数

文章标签：算法数据结构 javascript 前端

于 2022-06-28 10:51:05 首次发布

本文链接：https://blog.csdn.net/Qing416439079/article/details/125489417

版权

本文介绍了如何根据特定参数改变数据格式，以适应版本号变化的情况。通过示例代码展示了将一维数组转换为特定格式的过程，以便在前端使用el-select组件渲染数据。同时，文章提到了数据渲染的实现方法，利用版本号作为选择器的值，动态更新下拉选项。

摘要由CSDN通过智能技术生成

前言

当出现相同的参数根据另一个特定参数来改变数据

改变原因如下图出现相同的名字但是版本号不同下拉框数据是版本号改变版本号时候改变这一条数据所以一个大数组中分为每个对象每个对象两个参数第一个参数：是选中的版本号第二个参数是相同名字的数据组成一个对象 key是版本号对应他的数据

一、上图的数据格式（改变后）

。

selectedIndex选中版本号

versionData 拥有相同名字的版本号有 4 和 8

4 和 8 是版本号对应的对象是数据

二、实现步骤

1.改变数据格式

代码如下

dataset_version是版本号（根据这个来改变数据的）， dataset_name为名字（数据中相同的）

     setData(response) { // 改变数组的格式 一维数组
            const data = JSON.parse(JSON.stringify(response));
            const resultArr = data.map(item => {
                return {
                    selectedIndex: item.dataset_version,
                    versionData: {
                        [item.dataset_version]: item
                    }
                };
            });
            return resultArr.reduce((pre, next) => {
                if (!pre.length) {
                    pre.push(next);
                    return pre;
                }
                const finderIndex = pre.findIndex(item => {
                    return Object.keys(item.versionData).some((itema) => {
                        return item.versionData[itema].dataset_name === next.versionData[next.selectedIndex].dataset_name;
                    });
                });
                if (~finderIndex) {
                    pre[finderIndex].versionData[next.selectedIndex] = next.versionData[next.selectedIndex];
                    return pre;
                }
                pre.push(next);
                return pre;
            }, []);
        },

2. 渲染数据

代码如下（示例）：

 <el-select v-if="item.label==='数据集版本'" v-model="scope.row[item.prop]" @change="tabelRowchange(scope.row, scope.$index)">
                        <el-option v-for="(optItem,opIndex) in Object.keys(tableDatas[scope.$index].versionData)" :key="opIndex" :value="optItem" :label="optItem"/>
                    </el-select>