admin 管理员组

文章数量: 1087649

级联选择器el

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

版权声明：本文标题：级联选择器el 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686561561a10521.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。