js快捷使用递归构建树

一、方法封装导出

export const makeElementTree = (params) => {
  // console.log(params);
  // 解构取出参数
  const {
    pid,
    list,
    pidFiled,
    labelFiled,
    valueFiled
  } = params
  // 构建一个内部函数，用于实现递归
  const makeTree = (pid, arr) => {
    const res = []
    arr.forEach(i => {
      if (i[pidFiled] == pid) {
        // 自己调用自己，递归查归属于自己的 children
        const children = makeTree(i[valueFiled], list)
        // 将原有的数据按照 element 的格式进行重构
        const child = true
        const obj = {
          label: i[labelFiled],
          value: i[valueFiled],
        }
        // 如果有 children 则插入 obj 中
        if (children.length) {
          obj.children = children

        }
        res.push(obj)
      }
    })
    return res
  }
  return makeTree(pid, list)
}

二、引入使用

import { makeElementTree } from ‘@/utils/createTree’

    const unitList = unit.unit
    this.treeCats = makeElementTree({
      pid: '0',               // 跟后端约定的顶级分类的 pid 为 0
      list: unitList,           // 将原始数组参数穿进去
      pidFiled: 'pId', // 在数组对象中，pid 字段名为 parentId
      labelFiled: 'name',// 我们想要的 label 字段名为 catname
      valueFiled: 'id'   // 我们想要的 value 字段名为 catid
    })