级联选择器el-cascader处理复杂数据（四层、五层数据），回显部门以及部门下的人员

注意：参考第五层的数据处理比较nice

当级联选择器需要绑定的数组不再是简易数据，props涉及的字段不再是一个，而是列表里面套列表

比如，我想要获取部门以及下面的员工，如何显示？如下图1所示，后端返回的数据，sysDepartmentList是部门分组，sysUserList是员工分组，可是最终要在级联上呈现如下图2所示，怎么做到？好在公司的前一个项目有相关例子，足够我参考完成，记录下来，希望能帮到跟我一样的小白

图1：

图2（四层数据）

处理数据：

getOtherUsername(){
	//首先调用接口获取数据
      this.$axios.get('pm-security/sysUser/getDepartmentUser').then(res=>{
        console.log(res.data.data);//图1所示
        let resData = res.data.data;
        resData[0].sysUserList = resData[0].sysDepartmentList;
        resData[0].sysUserList.forEach((item, index) => {
          if (item.sysDepartmentList){
            item.sysUserList = item.sysDepartmentList;
            item.sysUserList.forEach((childItem, childIndex) => {
              if (childItem.sysUserList) {
                childItem.sysUserList.forEach((childItem2, childIndex) => {
                  childItem2.departmentName = childItem2.name;
                })
              }
            })
          }else {
            if (item.sysUserList) {
              item.sysUserList.forEach((childItem1, childIndex) => {
                childItem1.departmentName = childItem1.name;
              })
              return
            }
          }
        })
        this.cascaderOptions = resData;//cascaderOptions 是级联绑定的数组
      })
    },

补充：后来考虑到公司有分公司的情况，就加了一层数据

图3（五层数据）

处理数据：

getOtherUsername(){
      this.$axios.get('pm-security/sysUser/getDepartmentUser').then(res=>{
        let resData = res.data.data;
        console.log(resData)
        //共5层
        //第一层部门信息
        resData[0].sysUserList = resData[0].sysDepartmentList;
        resData[0].sysUserList.forEach((item, index) => { 
          //第二层有部门信息
          if (item.sysDepartmentList){
            item.sysUserList = item.sysDepartmentList;
            item.sysUserList.forEach((item2, item2Index) => { 
              //第三层有部门信息
              if(item2.sysDepartmentList){
                item2.sysUserList=item2.sysDepartmentList;
                item2.sysUserList.forEach((item3,item3Index)=>{
                  //第四层
                  if (item3.sysUserList) {
                    item3.sysUserList.forEach((item4, childIndex) => {
                      item4.departmentName = item4.name;
                      this.userInfo.push(item4)
                    })
                  }else {
                    item3.disabled = true;//部门下没有人员，禁止选择
                  }
                })
              }else {
                //第三层没有部门信息，直接取人员
                if (item2.sysUserList) {
                  item2.sysUserList.forEach((item5, childIndex) => {
                    item5.departmentName = item5.name;
                    this.userInfo.push(item5)
                  })
                }else {
                  item2.disabled = true;//部门下没有人员，禁止选择
                }
              }
            })
          }else {
            //第二层没有部门信息，直接取人员
            if (item.sysUserList) {
              item.sysUserList.forEach((item6, childIndex) => { //item6 第二层人员
                item6.departmentName = item6.name;
                this.userInfo.push(item6)
              })
              return
            }
          }
        })
        this.cascaderOptions = resData;
      })
    },