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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

注意:参考第五层的数据处理比较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;
      })
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值