element ui级联选择器异步加载（Element UI级联选择器 多选模式下，实现同一父级下最多只能选中一个子级）

这个需求有点多选与单选结合的意思    
    
    
，同一父级下的子节点单选 


     


     


  ，又可以选择多个不同父级下的节点
    
    
  。这里以两级为例

 




 




 
，实现一个在多选模式下   

   

   

，同一父级下最多只能选中一个子级的级联选择器     


     


     
。

1
    
    
  、隐藏父级节点处的CheckBox

多选模式下可以通过勾选父级一键选中所有的子级  

     

     

 ，而每个父级下可能有多个子级


  




  




  ，也可能只有一个  


  


  


，起初我想的是根据本次选择选中的个数分类讨论   
     
     
，但讨论起来比较繁琐



   




   




   ，所以最后决定直接把父级的checkbox隐藏掉 



 



 


，不让用户直接勾选父级              ，减少了很多不必要的麻烦 




 




 




。

.hide { .el-cascader-menu:first-of-type { .el-cascader-node { .el-checkbox { display: none; } } } }

这里需要注意的一点是hide类名必须使用级联选择器中的popper-class来添加自定义浮层类名的

   

   

 。

 2     


     


     
、对选中的项进行筛选限制




    




    




   ，先找到本次新增的项












，和新增前的值进行对比               ，看是否存在与本次新增的项同属于一个父级的



     



     



   ，如果存在则删除之前已经存在的那一项












，留下本次新增的     

     

     。

这里的解决花费了我很多时间    
    
    
，因为一开始想着直接操作级联选择器绑定值 


     


     


  ，删除掉不要的那一项就可以了

 




 




 
，但问题出现了  




  




  




。绑定的值确实达到了我想要的效果（即删除之前已经存在的那一项   

   

   

，留下本次新增的）  

     

     

 ，但级联面板中右侧的部分（即子节点部分）


  




  




  ，会自动刷新跳转到第一个父级下的子级面板  


  


  


，用户体验差   
     
     
，尝试解决



   




   




   ，没解决掉


  


  


。     
     
     。   




   




   



。

最后 



 



 


，选择从另外一个角度来实现              ，如果存在与本次新增的项同属于一个父级的




    




    




   ，则直接通过js触发点击事件












，取消勾选之前已经存在的那一项



 



 



。

有了思路以后就可以一步一步来实现了              。

首先找到本次新增的这一项               ，由于组件库文档中级联选择器这一块并没有提供相关的办法获取到最新选择的一项



     



     



   ，只能拿到已选择的所有值












，并且级联选择器新增的项并不是直接push到绑定值的末尾    
    
    
，而是按选项值在页面上展示的顺序添加的 


     


     


  ，所以只能手动去对比查找

 




 




 
，需要定义一个preValue数组来存储上一次的值    




    




    


。

let newIndex; let i = 0, j = 0; while (i < val.length && j < this.preValue.length) { if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) { i++; j++; } else { //添加在中间的情况 newIndex = i; break; } } //添加在末尾的情况 if (j === this.preValue.length) { newIndex = i; }

找到新增项后   

   

   

，再去对比在此之前是否添加过于新增项同一父级下的其他子级














。

let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);

如果存在的话  

     

     

 ，接下来就需要去触发相应的点击事件取消这一项的勾选             。

我们先来观察一下html结构


  




  




  ，右侧面板下的各个li标签的id值其实就是右侧面板id值加上：-+index  


  


  


，因此我们只需要拿到右侧面板id值就能知道对应选项的id值   
     
     
，再触发li标签的孩子标签中的checkbox的点击事件就可以了     



     



     

。

 右侧面板id通过级联选择器的引用可以拿到



   




   




   ，另外需要求得取消勾选选项的index 



 



 


，通过与级联选择器选项值对比得到














。

let cancelIndex; for (let i = 0; i < this.options.length; i++) { if (this.options[i].value === val[delIndex][0]) { for (let j = 0; j < this.options[i].children.length; j++) { if (this.options[i].children[j].value === val[delIndex][1]) { cancelIndex = j; break; } } break; } }

获取id值
    
    
  。

this.$nextTick(() => { let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板 let liId = document.getElementById(panelId + - + cancelIndex); liId.children[0].click(); })

到这里就基本完成了这个需求              ，其实不难




    




    




   ，但因为一开始自己的思路（直接删值）实现起来出现了问题












，想着去解决花费了很多时间               ，也没解决掉



     



     



   ，最后和同事讨论换一种思路很快就实现了












，所以思路变通是非常重要的~

3 




 




 




、完整代码

<template> <div class=test> <el-cascader class=cascader :options=options :props=props clearable :popper-class="hide" @change=handleChange ref=cascade ></el-cascader> </div> </template> <script> export default { name: Cascader, data() { return { props: { multiple: true, expandTrigger: click }, options: [{ value: 1, label: 杭州, children: [{ value: 3, label: 西湖 }, { value: 4, label: 钱塘 }, { value: 7, label: 上城 }] }, { value: 2, label: 成都, children: [{ value: 5, label: 青羊 }, { value: 6, label: 武侯 }] }], preValue:[] } }, methods:{ handleChange(val){ if (this.preValue.length > 0 && val.length > this.preValue.length) { let newIndex; let i = 0, j = 0; while (i < val.length && j < this.preValue.length) { if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) { i++; j++; } else { //添加在中间的情况 newIndex = i; break; } } //添加在末尾的情况 if (j === this.preValue.length) { newIndex = i; } let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]); if (delIndex >= 0) { // 取消选择的节点 let cancelIndex; for (let i = 0; i < this.options.length; i++) { if (this.options[i].value === val[delIndex][0]) { for (let j = 0; j < this.options[i].children.length; j++) { if (this.options[i].children[j].value === val[delIndex][1]) { cancelIndex = j; break; } } break; } } this.$nextTick(() => { let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板 let liId = document.getElementById(panelId + - + cancelIndex); liId.children[0].click(); }) val[delIndex] = ; val = val.filter(item => item !== ); } } this.preValue = val; } } }; </script> <style lang=less> .test { text-align: center; margin-top: 200px; .title { display: block; margin-bottom: 20px; } .cascader { .el-input__inner { width: 362px; } .el-cascader__tags { display: flex; flex-wrap: nowrap; overflow-y: overlay; margin-left: 2px; } .el-cascader__tags::-webkit-scrollbar { width: 0; height: 3px; } /*定义滚动条轨道 内阴影+圆角*/ .el-cascader__tags::-webkit-scrollbar-track { background-color: rgba(186, 203, 227, 0.3); } /*定义滑块 内阴影+圆角*/ .el-cascader__tags::-webkit-scrollbar-thumb { background-color: #B3C2D7; } } } .hide { .el-cascader-menu:first-of-type { .el-cascader-node { .el-checkbox { display: none; } } } } </style>

如果大家有更好的解决办法或优化    
    
    
，欢迎评论区讨论~