级联选择器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;})},

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

layui添加复选框_layui表格数据复选框回显设置方法
layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这 ...
element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显
element-ui 中 el-table 分页多选(记住上一页勾选数据)及编辑回显 element-ui 的官网是有属性的 el-table-colum 的 reserve-selection 属性 ...
elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法
Cascader第二次绑定值时,下拉框里选项高亮样式仍显示上一次绑定值时的状态我在使用el-cascader-panel时发现的,官方文档中说明有clearCheckedNodes该方法可清空选中节 ...
ssm 转发请求_springmvc（重定向和请求转发、数据的接收和回显）
1.请求转发 (1)直接书写要转发的页面: @Controller public class HelloController{ @RequestMapping("/hello") ...
cascader 动态加载回显_Elementui cascader 级联选择器动态加载数据，保存后回显的问题...
问题描述使用elementui,进行地区选择,分省市区三级动态加载,首次保存后,再次回看数据,怎么选中上次保存的地区省市区三级都是动态加载,下次回来,只有省一级数据,model里面存的是一个数组, ...
element级联选择器城市3级联动三级联动json数据
[{"value": "110000","label": "北京市","children": [{& ...
MongoDB+Node.js+express简单实现数据的提交与回显
这是一个从前端到后台到数据库都是用js写的小demo,所以我们的口号是:将javascript进行到底一.项目目录从图片上也可以看出来,用了一个伪MVC的设计模式,简单来说controllers文 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue表格刷新数据_vue+element-ui实现表格某个数据弹窗添加数据，保存后数据更新，再次打开弹窗，数据回显...
实现功能: 1.生成数据插入table 2.修改table的某个数据,保存后该数据进行更新 3.点击table的btn,选择的数据仍是选中状态,数据回显示例-1-选择地址插入表格示例-2-选择指定 ...

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

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

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

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

最新文章

热门文章