1.前期准备工作

• vue create vue-arraytotree
• npm i element-ui
• npm i array-to-tree
• 全局注册 ElelmentUI
• App.vue 页面
• 新建 utils/index.js 放工具函数

App.vue 页面数据及组件准备

<template>
  <div>
      <el-tree :data="list"  :default-expand-all="true" >
        <template v-slot="{ data }">
          <el-row>
            <el-col>
              <span>{{ data.job }}------{{ data.name }}</span>
            </el-col>
          </el-row>
        </template>
      </el-tree>
  </div>
</template>

<script>
export default {
  name: "VueArraytotreeApp",

  data() {
    return {
      //◆需要渲染到页面中的数据
      list: [],
      //◆实际开发是从后台获取数据,我们模拟一个从后台发过来的数据
      dataList: [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },
        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },
        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" },
      ]
    }
  }
}
</script>

2.封装工具函数-平铺数组转树状结构

法1：利用第三方模块，下包 npm i array-to-tree

在 utils/index.js 里面操作

//引入 array-to-tree
import arrayToTree from 'array-to-tree'
export function tranListToTreeData1(arr) {
    const newArr = arrayToTree(arr, {
        parentProperty: 'pid',
        customID: 'id'
    })
    return newArr
}

法2 forEach 遍历与 map 映射

在 utils/index.js 里面操作

export function tranListToTreeData2(arr) {
    // 1. 定义两个变量
    const treeList = [], map = {}

    // 2. 建立一个映射关系，并给每个元素补充children属性
    arr.forEach(item => {
        if (!item.children) {
            item.children = []
        }
        map[item.id] = item
    })

    // 3.循环
    arr.forEach(item => {
        const parent = map[item.pid]
        // 如果有上级,表示 item 不是最顶层的数据,添加到上级的 children 中
        if (parent) {
            parent.children.push(item)
        } else {
            // 如果没有上级,表示 item 是顶层数据,直接添加到 treeList 中
            treeList.push(item)
        }
    })
    // 4.返回树形数组
    return treeList
}

法3 递归实现树形数组

在 utils/index.js 里面操作

export function tranListToTreeData3(arr, parentId) {
    function loop(parentId) {
        let res = []
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i]
            if (item.pid !== parentId) {
                continue
            }
            item.children = loop(item.id)
            res.push(item)
        }
        return res
    }
    return loop(parentId)
}

3.在需要的组件里面引入封装好的工具函数, methods 里面定义, created 里面调用

App.vue

<template>
  <div>
      <el-tree :data="list"  :default-expand-all="true" >
        <template v-slot="{ data }">
          <el-row>
            <el-col>
              <span>{{ data.job }}------{{ data.name }}</span>
            </el-col>
          </el-row>
        </template>
      </el-tree>
  </div>
</template>

<script>
// ◆1.导入封装好的工具函数-数组转树状结构
// import {tranListToTreeData1} from './utils'
// import {tranListToTreeData2} from './utils'
import {tranListToTreeData3} from './utils'
export default {
  name: "VueArraytotreeApp",

  data() {
    return {
      //◆需要渲染到页面中的数据
      list: [],
      //◆实际开发是从后台获取数据,我们模拟一个从后台发过来的数据
      dataList: [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },
        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },
        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" },
      ],
    }
  },
  created() {
    // ◆3.触发 methods 中定义好的 tarnsArrayToTreeHandler 函数
    this.tarnsArrayToTreeHandler()
  },
  methods: {
    // ◆2.定义树形结构函数 tarnsArrayToTreeHandler
     tarnsArrayToTreeHandler(){
      //  this.list=tranListToTreeData1(this.dataList)
      //  this.list=tranListToTreeData2(this.dataList)
       this.list=tranListToTreeData3(this.dataList,'')
       console.log(this.list)
       }  
  }
}
</script>