将扁平数据进行嵌套处理

项目中常常遇到需要嵌套结构的数据,比如,父分类下有若干子分类,上级权限包含若干二级权限,三级权限等等,此时可以使用v-for循环输出,但是对数据就要求是嵌套结构;

在后台直接存储时,使用扁平结构比较方便,

如果直接拿来在模板中使用的话,需要一层层循环遍历数据,此时会消耗大部分浏览器性能,导致其他业务逻辑无法执行;时间复杂度On^n1(几层嵌套n1就是几)

若是后台有好一点,可能在发数据之前先处理一下,若是没有处理就需要我们前端进行处理了:

处理方式:递归处理

  //id是唯一标识, pid为是父级id,pid为0的是以及权限
      function transDate(data, pid) {
        let ret = [];
        data.forEach((it) => {
          //查找到该项的pid和传入的id相等,则说明该项it为对应的子项
          if (it.pid == pid) {
            ret.push(it);
            // 递归 ,将该项的id作为子嵌套的父级id
            it.children = transDate(data, it.id);
          }
        });
        return ret;
      }

数据处理前为扁平结构:

  let obj = [
        {
          id: 1,
          pid: 0,
          name: "a",
        },
        {
          id: 2,
          pid: 0,
          name: "b",
        },
        {
          id: 3,
          pid: 1,
          name: "c",
        },
        {
          id: 4,
          pid: 3,
          name: "d",
        },
      ];

处理后进行打印:

此时方便进行处理渲染,