最终实现图

. 1. 接口扁平化数据转树型结构数据 （递归）

// 转换树行数据的方法
export const transTree = (list, pidKey, idKey = 'id') => {
  // 最终生成的树行结构
  const treeData = []

  // 对传入进来的 数据进行遍历，查找对应的子级
  list.forEach((item) => {
    // 给每一项添加子节点
    // item.children = []
    // 如果没有子数据 则去掉children字段
    item.children && item.children.length === 0 && delete item.children
    // 如果 pid 为空，说明是最顶级，直接放到 treeData 中即可
    if (!item[pidKey]) {
      treeData.push(item)
    }
    // 根据前面的分析，pid 代表的是父级的 id，从而可以进行筛选子级
    // filter 方法会把满足条件到的每一项，组成一个数组进行返回
    const children = list.filter((data) => data[pidKey] === item[idKey])

    // 如果没有子节点，直接 return 不做任何处理
    if (!children.length) return

    // 将返回的子级进行赋值给父级(item)的 children 属性
    item.children = children
  })
  // 将最终生成的数据返回出去
  return treeData
}

树形结构数据添加序号

 this.dataList = transTree(后端返回值, 'pidKey') // 扁平化数据转树形结构数据
 this.dataList = this.setData(JSON.parse(JSON.stringify(this.dataList))) // 添加序号
// 添加序号方法
 setData(data, parentIndex) {
    data.forEach((item, index) => {
      item.index = parentIndex ? parentIndex + '-' + Number(index + 1) : index + 1
      if (item.children) {
        this.setData(item.children, item.index)
      }
    })
    return data
  }