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

原创

已于 2022-05-07 17:15:24 修改 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2021-08-05 17:34:20 首次发布

本文介绍了如何处理从后端获取的多层嵌套数据，以适配前端级联选择器的展示需求。通过示例代码展示了从四层到五层数据的转换过程，确保每个部门下员工信息正确显示，并处理了部门下无人员时的禁选情况。文章还提及了参考公司前项目的经验，对于遇到类似问题的开发者具有一定的参考价值。

注意：参考第五层的数据处理比较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