第一步:
// 遞歸: 封裝一個函數(shù):將列表list數(shù)據(jù)轉(zhuǎn)換成數(shù)據(jù)樹形數(shù)據(jù)=>遞歸
// 遍歷樹形 有一個重點 要先找一個頭
function transListDataToTreeData(list, root) {
  const arr = []
  // 1.遍歷
  list.forEach((item) => {
    // 2.首次傳入空字符串  判斷l(xiāng)ist的pid是否為空 如果為空就是一級節(jié)點
    if (item.pid === root) {
      // 找到之后就要去找item下面有沒有子節(jié)點  以 item.id 作為 父 id, 接著往下找
      const children = transListDataToTreeData(list, item.id)
      if (children.length > 0) {
        // 如果children的長度大于0,說明找到了子節(jié)點
        item.children = children
      }
      // 將item項, 追加到arr數(shù)組中
      arr.push(item)
    }
  })
  return arr
}

//第二步:
// 調(diào)用轉(zhuǎn)化方法，轉(zhuǎn)化樹形結(jié)構(gòu) 賦值給data中定義的數(shù)組
this.departs = transListDataToTreeData(data.depts, '')

//第三步: 渲染到頁面
<!-- 樹形控件el-tree :data:指定數(shù)據(jù)  props:屬性成員配置項 default-expand-all 控制是否默認展開-->
<!-- el-tree組件 里面內(nèi)容是插槽內(nèi)容 有多少個節(jié)點循環(huán)多少次 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
 </el-tree>

npm install array-to-tree --save
import arrayToTree from 'array-to-tree'

arr = [[{},{}],[{},{}],[{},{}]]
const = data = [].concat(...arr.map((v) => v))
log(data) // [{…}, {…}, {…}, {…},...]

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]