第一种方法 --使用递归来处理

1.定义函数

/* 属性数据处理递归函数 */
/*arr, pid = '' 形参*/
export function toDo(arr, pid = '') {
  /* 得到处理之后的树形数据 */
  var newArr = []
  /* 1-循环数组 */
  arr.forEach((item) => {
    if (item.pid === pid) {
      /* 3-收集不是第一层的 */
      var child = toDo(arr, item.id)
      if (child.length) {
      /*把筛选出来的数据   赋值给item的children 表示一级的子级*/
        item.children = child
      }
      // console.log(obj, 8)
      /* 2-筛选第一层  把筛选出来的数据 添加进新数组*/
      newArr.push(item)
    }
  })
  return newArr
}

2.1如果在其他页面 那就导入，例如：

import { toDo } from '@/utils/'

2.2如果在本页面那就直接调用即可---注意需要传参

/*里面需要传入实参--数组*/
toDo(数组)

第二种方法 --下包

如果感觉写递归不太明白 可以使用第三方包 下载引入即可使用
1.下包

yarn add array-to-tree --save

2.导入

import arrayToTree from 'array-to-tree'

3.定义函数

export function toDo2(arr) {
  return arrayToTree(arr, {
    parentProperty: "pid",
    customID: "id",
  });
}

4.直接调用即可

toDo2(数组)