将数据处理为Tree树形数据

当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染

示例数据:

const arr = [
  { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' },
  { id: '02', name: '小亮   产品leader', pid: '01', job: '产品leader' },
  { id: '03', name: '小美', pid: '01', job: 'UIleader' },
  { id: '04', name: '老马   技术leader', pid: '01', job: '技术leader' },
  { id: '05', name: '老王   测试leader', pid: '01', job: '测试leader' },
  { id: '06', name: '老李   运维leader', pid: '01', job: '运维leader' },
  { id: '07', name: '小丽   产品经理', pid: '02', job: '产品经理' },
  { id: '08', name: '大光   产品经理', pid: '02', job: '产品经理' },
  { id: '09', name: '小高   UI设计师', 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: '运维工程师' },
  { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' },
]

方法:递归

/**
 * 将列表型的数据转换成树形数据 => 递归算法
 * 这里是要建立树形结构, 所以一定要找一个头
 */
export function tranListToTreeData(list, rootValue) {
  const arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 以 item.id 作为 父 id, 接着往下找
      const children = tranListToTreeData(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      // 将item项, 追加到arr数组中
      arr.push(item)
    }
  })
  return arr
}

我们发现,一级数据的pid值是空,所以传入的value为空,一级菜单就得到了.
再以 item.id 作为 父 id, 接着往下找(递归),判断递归的数组长度,长度大于0
则,是对应父级的children(不固定,element定义可以在props更改哦 记得看文档)
效果如下

将tree数据转为arr

function treeToList(data) {
  let ret = [];
  const fn = (list) => {
      list.forEach(item => {
          ret.push({ ...item, children: undefined, pid: item.pid === '0' ? null : item.pid});
          if (item.children) {
              fn(item.children);
          }
      })
      return ret;
  }
  return fn(data);
}

精简后的写法

//第二种
const treeToarr = (list=[])=>{
  let arr =[]
  list.forEach(item=>{
    arr.push({...item,children:undefined,pid:item.pid==0? null : item.pid})
    if(item.children){
      // arr.push(...treeToarr(item.children))
      arr =arr.concat(treeToarr(item.children))
    }
  })
  return arr
}

树形数据搜索返回节点

刷抖音刚好看到这个视频,觉得手痒就写来试试.

const findTree = (data, label) => {
  let result = []
  if (data.label.includes(label)) {
    result.push(data.label)
    return result
  }
  if (data.children && data.children.length > 0) {
    for (let i = 0; i < data.children.length; i++) {
      let res = findTree(data.children[i], label)
      if (res.length > 0) {
        result = result.concat(data.label, res)
        break
      }
    }
  }
  return result
}