Vue二次封装element-ui的树组件（二）——将扁平数据变成二维数组

最新推荐文章于 2023-08-15 09:17:12 发布

采故事的女孩

最新推荐文章于 2023-08-15 09:17:12 发布

阅读量702

点赞数

分类专栏： vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_42416812/article/details/101023346

版权

本文详细介绍了如何在Vue中对Element-UI的树组件进行二次封装，核心内容是将原始的扁平数据转换为适合树结构展示的二维数组，以实现更灵活的数据呈现。

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

将扁平数据变成二维数组：

<template>
  <div>

  </div>
</template>
<script>
import { getTreeList } from './api'
export default {
  async mounted () {
    let { data } = await getTreeList();
    // console.log(data);
    // 1)扁平数据如何变成多层数据 递归数据
    let AllData = [...data.parent, ...data.child];
    // console.log(AllData);
    //变成映射表
    let treeMapList = AllData.reduce((memo, current) => {
      memo[current["id"]] = current;
      return memo;
    }, {})
    // console.log(treeMapList)
    let result = AllData.reduce((arr, current) => {
      let pid = current.pid;
      let parent = treeMapList[pid];
      if (parent) {
        parent.children ? parent.children.push(current) : parent.children = [current]
      } else if (pid === 0) {  //这是根文件夹
        arr.push(current);
      }
      return arr;
    }, [])
    console.log(result)
  }

}
</script>