JS三级联动数据处理

1.数据库数据

2.前端获取到的数据

3.数据处理

//  departments 数据源 parentId根id
buildDepartmentTree(departments, parentId) {
  // 根据给定的父部门ID过滤出子部门数组
  const children = departments.filter(department => department.parentId === parentId);
  // 递归构建子部门的树结构，并使用数组解构提取id和deptName属性
  return children.map(({ id, deptName }) => ({
    id,
    name: deptName,
    children: this.buildDepartmentTree(departments, id)
  }));  
}

4.处理空children问题

实现思路使用递归将空的children设置为undefined

 //处理childer
  deleteChildern(data) {
  data.forEach(item => {
    if (item.children.length > 0) {
      item.children =this.deleteChildern(item.children);
    } else {
      delete item.children;
    }
  });
  return data;
},

 5.方法链接

    //获取所有部门
    async getSectionList() {
      let { data } = await this.$http.get("/dept")
      // console.log(this.SectionList);
      //处理三级联动
      let datalist = this.buildDepartmentTree(data, 0)
      //处理空children
      this.SectionList= this.deleteChildern(datalist) 
      console.log(this.SectionList,'lsit');
    },