将扁平结构数据转换成树形结构

扁平结构数据

树形结构数据

实现思路：利用递归实现

// reOptions是从后端获取到的扁平结构
getOption() {
  const tree = []
// 我是利用el-tree做的,所以先把后端给的数据构建成el-tree里需要的字段名称
  const list = this.reOptions.map(item => ({
    label: item.classificationName,
    id: item.classificationId,
    parentId: item.parentId
  }))
// 遍历构建好字段名称数据,调用递归函数
  for (let i = 0, len = list.length; i < len; i++) {
    if (!list[i].parentId) {
      const item = this.queryChildren(list[i], list)
      tree.push(item)
    }
  }
// 赋值
  this.options = tree
},

// 将父级分类的数据结构转换为树形结构
queryChildren(parent, list) {
  const children = []
  for (let i = 0, len = list.length; i < len; i++) {
    if (list[i].parentId === parent.id) {
      const item = this.queryChildren(list[i], list)
      children.push(item)
    }
  }
  if (children.length) {
    parent.children = children
  }
  return parent
},

参考若依系统的部门管理

修改时上级部门不能选它自己以及它自己的子集

所以可以根据你自己的需求禁用或删除(个人觉得删除比较简单，禁用复杂一些，其次，el-tree如图的使用方法好像没有禁用功能)

// 在树形结构中找到当前选中的值,并删除他以及他的子节点
this.searchTree(this.options, this.classificationId) //调用
// 参数nodes是构建好的树形结构数据;searchKey是你要修改的当前数据id
searchTree(nodes, searchKey) {
  for (let _i = 0; _i < nodes.length; _i++) {
// 遍历树形结构数据,在其中找到当前数据id,进行删除
    if (nodes[_i].id === searchKey) {
      nodes.splice(_i, 1)  //可用delete nodes[_i],但不知道为啥,我用delete删除后成undefined了,导致渲染数据时报错
      return nodes
    } else {
      if (nodes[_i].children && nodes[_i].children.length > 0) {
        let res = this.searchTree(nodes[_i].children, searchKey);
        if (res) {
          return res
        }
      }
    }
  }
  return null
},

按若依实现,选中后只展示了最后一级名称

如果想要如下效果,需要再处理一下数据

// 父级分类数据回显筛选出当前级的父级
echoOptions() {
  this.sortArr = []
// 筛选出当前级的父级
  this.parentArr = this.reOptions.filter(item => item.classificationId == this.parentId)[0]
  this.sortArr.push(this.parentArr.classificationName)
  this.recursionOptions()
},
recursionOptions() {
  //筛选出当前级 父级 的 父级 即:当前级的爷级
  if (this.parentArr.parentId != 0) {
    this.parentArr = this.reOptions.filter(item => item.classificationId == this.parentArr.parentId)[0]
    this.sortArr.push(this.parentArr.classificationName)
    this.recursionOptions()
  } else {
    var reSortArr = this.sortArr.reverse() // 追加进去的数据是倒序的,而页面展示是正序的,故需要翻转过来
    this.form.parentName = reSortArr.join('/') //  使用 / 拼接
  }
  return
},