复杂的多级数组数据转成适合el-cascader的数据格式

最新推荐文章于 2024-03-20 16:19:03 发布

前端小尘

最新推荐文章于 2024-03-20 16:19:03 发布

阅读量823

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/chen3647/article/details/128562592

版权

原始数据：

 [
          {
            children: [
              {
                children: [
                  {
                    id: "d44d4ddwedd",
                    label: "方法",
                    current: "1",
                    currentNum: 0,
                    deleteFlag: 0,
                    deptCode: "000",
                    disableFlag: 0,
                    hasPageFlag: true,
                  },
                  {
                    id: "d44d4ddwedd",
                    label: "个人",
                    current: "1",
                    currentNum: 0,
                    deleteFlag: 0,
                    deptCode: "000",
                    disableFlag: 0,
                    hasPageFlag: true,
                  },
                ],
                id: "d44d4ddwedd",
                label: "第三",
                current: "1",
                currentNum: 0,
                deleteFlag: 0,
                deptCode: "000",
                disableFlag: 0,
                hasPageFlag: true,
              },
              {
                id: "d44d4ddwedd",
                label: "第四",
                current: "1",
                currentNum: 0,
                deleteFlag: 0,
                deptCode: "000",
                disableFlag: 0,
                hasPageFlag: true,
              },
            ],
            id: "d44d4ddwedd",
            label: "第一",
            current: "1",
            currentNum: 0,
            deleteFlag: 0,
            deptCode: "000",
            disableFlag: 0,
            hasPageFlag: true,
          },
          {
            children: [
              {
                id: "d44d4ddwedd",
                label: "法人",
                current: "1",
                currentNum: 0,
                deleteFlag: 0,
                deptCode: "000",
                disableFlag: 0,
                hasPageFlag: true,
              },
              {
                id: "d44d4ddwedd",
                label: "热发",
                current: "1",
                currentNum: 0,
                deleteFlag: 0,
                deptCode: "000",
                disableFlag: 0,
                hasPageFlag: true,
              },
            ],
            id: "d344dfd34edd",
            label: "第二",
            current: "1",
            currentNum: 0,
            deleteFlag: 0,
            deptCode: "000",
            disableFlag: 0,
            hasPageFlag: true,
          },
        ];

需要的数据：

[
          {
            children: [
              {
                children: [
                  {
                    value: "d44d4ddwedd",
                    label: "方法",
                  },
                  {
                    value: "d44d4ddwedd",
                    label: "个人",
                  },
                ],
                value: "d44d4ddwedd",
                label: "第三",
              },
              {
                value: "d44d4ddwedd",
                label: "第四",
              },
            ],
            value: "d44d4ddwedd",
            label: "第一",
          },
          {
            children: [
              {
                value: "d44d4ddwedd",
                label: "法人",
              },
              {
                value: "d44d4ddwedd",
                label: "热发",
              },
            ],
            value: "d344dfd34edd",
            label: "第二",
          },
        ];

从原始数据到想要的数据，因为是多级数组，也不确定它有多少级，所以要用到递归

 let map = {
          value: "id",
          label: "label",
          children: "children",
        };
        let arr = convertTree(res.data, map);

        this.officeOpts = arr;

        function convertTree(tree, map) {
          const result = [];
          console.log(1);
          // 遍历 tree
          tree.forEach((item) => {
            // 读取 map 的键值映射
            const value = item[map.value];
            const label = item[map.label];
            let children = item[map.children];

            // 如果有子节点，递归
            if (item.children.length) {
              children = convertTree(children, map);
            } else {
              children = undefined;
            }

            result.push({
              value,
              label,
              children,
            });
          });
          return result;
        }