数组转树形结构

function toTree(data) {
  let treeData = [];
  if (!Array.isArray(data)) return treeData;

  data.forEach(item => {
    delete item.children;  //删除item下的children，以防多次调用
  });

  let map = {};
  data.forEach(item => {
    map[item.id] = item;
  });

  data.forEach(item => {
    let parent = map[item.pid];  //判断item的pid是否是否存在map中
    if (parent) {  //如果存在则表示item不是最顶层的数据
      (parent.children || (parent.children = [])).push(item)
    }
    else {
      treeData.push(item)  // 如果不存在 则是顶层数据
    }
  });
  return treeData;
}

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

使用element的Tree 树形控件时，Tree 组件默认的是 label， 如果要修改成后台返回数据对应的字段，则设置 :props=“defaultProps” 然后在data中的 defaultProps 里把默认的label 和 value 改成 name和 pid

<template>
  <div>
	<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
	  defaultProps: { // 通过 defaultProps 将 默认的转换成 后台返回给我们的对应的字段 渲染在页面
        value: "pid",
        label: "name"  
      },
    }
  },
  
  methods: {
    // 将从后台获取的数组 转换成 树形结构
    getList() {
      getTreeList({ data: {} }).then(res => {
        if (res.code === 0) {
          this.data= toTree(res.data);  // 转换之后，则 data 为树形结构的数据
        } else {
          this.$message.error(res.message)
        }
      });
    },
}
</script>