前端数据树状列表展示

实现柱状列表展示的话，主要是对数据进行树状处理。

原数据长这样：

[
    {
        "name": "aa.bb.cc",
        "age": "12"
    },
    {
        "name": "aa.dd",
        "age": "18"
    },
    {
        "name": "cc",
        "age": "22"
    }
]

这里我们根据 . 进行分割文件夹。如name为 aa.bb 的数据，就会出现一个渲染在文件夹aa底下的数据，数据名叫bb。

处理数据的方法：

 function searchChildren(aa, bb) {
    for (let i = 0, len = aa.length; i < len; i++) {
      if (aa[i].name == bb) return aa[i].children;
      continue;
    }
    aa.push({
      name: bb,
      children: [],
    });
    return aa[aa.length - 1].children;
  }


  let ans = list.reduce((acc, curr) => {
    let dir = curr.name.split(".");
    let target = acc;
    for (let i = 0, len = dir.length; i < len - 1; i++) {
      target = searchChildren(target, dir[i]);
    }
    console.log("dir[dir.length - 1]", dir[dir.length - 1]);

    target.push({
      name: dir[dir.length - 1],
      ...curr,
    });
    return acc;
  }, []);

  console.log(ans);

处理后的数据

[
    {
        "name": "aa",
        "children": [
            {
                "name": "bb",
                "children": [
                    {
                        "name": "cc",
                        "age": "12"
                    }
                ]
            },
            {
                "name": "dd",
                "age": "18"
            }
        ]
    },
    {
        "name": "cc",
        "age": "22"
    }
]