el-cascader级联实现一级菜单单选,二级菜单多选

主要是把逻辑搞清楚,实现起来容易了,主要思路就是把当前选中与上次选中做对比,使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组

 
this.scopeList=[
                { id: 'system',
                    name: '系统',
                  },
                { id: 'domain',
                    name: '部门',
                    children:this.domainList,

                },
            ];

this.domianList是另一个接口返回的列表,这里不再详述,根据需要编写自己的children,可见system下没有children,就是要实现系统与部门之间的单选,部门下列表的多选

主要是在shareScoprChange下编写逻辑代码

shareScopeChange(val){
          //是否与上次的类型相同
            let changeFlag=false;
           let  changeItem=null;
            if(this.shareScopeEnd.length===0){
                this.shareScope = val;
            }
            else{
                //与原数组比对
                this.shareScope.forEach((item)=>{
                //与原数组的类型相同
                    if(item[0]!==this.shareScopeEnd[0][0]){
                        changeFlag = true;
                        changeItem=item;
                    }
                });
            }
            if(changeFlag){
              //上次是system,那么这次是domain
                if(this.shareScopeEnd[0][0]==='system'){
                    this.shareScope =this.shareScope.filter((item)=>{
                         return (item[0]!== 'system');
                      });
                }else{
                    this.shareScope=[];
                    this.shareScope.push(changeItem);
                }
            }
            this.shareScopeEnd = this.shareScope;
        },

shareScopeEnd为最终的结果,也是变化前的结果。逻辑有些繁琐,如有优化建议,可一起探讨。

注:去除props的checkStrictly: true,可恢复一二级关联关系,既选中一级同时该一级下的二级全部选中,详见element-UI

你可能感兴趣的:(cesium,Vue,js)