美文网首页
js 多级菜单遍历

js 多级菜单遍历

作者: VIAE | 来源:发表于2021-02-05 18:00 被阅读0次

原始数组:

menuData: [
        {
          menuId: 1,
          name: "一级菜单",
          parentNode: "1",
          url: "http://baidu.com/",
        },
        {
          menuId: 2,
          name: "二级菜单",
          parentNode: "1-1",
          url: "http://github.com",
        },
        {
          menuId: 3,
          name: "三级菜单",
          parentNode: "1-1-2",
          url: "http://jianshu.com",
        },
        {
          menuId: 4,
          name: "又一个一级",
          parentNode: "2",
          url: "http://xxx.com/#/",
        },
        {
          menuId: 5,
          name: "又一个二级",
          parentNode: "2-1",
          url: "http://xxxx.com/",
        },
      ],

重组多级树

toTree(data) {
      var arr = [...data];
      // 查找一级 (根据自己的需求更改过滤条件)
      var tree = arr.filter((v) => v.parentNode.split("-").length === 1);
      tree.map((v) => {
        // 查找二级
        v.children = arr.filter(
          ({ parentNode }) =>
            parentNode.slice(0, parentNode.length - 2) === v.parentNode
        );
        if (v.children.length == 0) v.children = [];
        else {
          v.children.map((item) => {
            // 查找三级
            item.children = arr.filter(
              ({ parentNode }) =>
                parentNode.slice(0, parentNode.length - 2) === item.parentNode
            );
            if (item.children.length == 0) item.children = [];
            return item;
          });
        }
        return v;
      });
      return tree;
    },

调用

let a = this.toTree(this.menuData)

相关文章

网友评论

      本文标题:js 多级菜单遍历

      本文链接:https://www.haomeiwen.com/subject/kyrqzktx.html