Element的Cascader 级联选择器禁用和回显问题

痛定思痛。 2022-03-25 16:08 1270阅读 0赞

今日，在vue项目中使用饿了么的Cascader级联选择器时，遇到了一个问题，情景时这样的， 数据是从后台拿到的，前端要做出的效果是当满足某些条件时，某些选项禁止选中。花了很长时间解决这个问题，于是写这篇文章记录解决方案。

![20190121171917152.png][]

如上图所示，假如 ecs为v类型，则不允许选中其子节点。 按照以往经验，简单分析，应该是树的这个节点添加一个字段就能实现禁用，果不其然，去饿了么官网查看得知（[Cascader级联选择器][Cascader]），添加一个disabled属性即可。

于是对后端返回的数据进行如下处理：

getTreeList(val) {
    			//对 treeList 进行递归操作，禁止选中t和v
    			val &&
                    val.forEach(item => {
                    	if (item.type == "t" || item.type == "v") {
                    		item.disabled = true; // 如果类型为t或者v，就增加禁用选项
                    	}
                    	if (item.children) {
                            this.getTreeList(item.children);
                        }
                    });
       return val ;
    }

如上代码显示，递归遍历treeList ，将所有节点及其子节点进行遍历，判断type属性是否为t或者v ,如果是 就给该节点增加disabled属性，并设置为true,  item是一个json对象，里面并没有disabled字段，显式的指定item.disabled=true ,就给该json对象中增加了disabled属性， 并设为true。（一下子暴露了对js中的对象的理解并不是很透彻。。） 。

这样就解决了我的需求， 但是这里仍想记录一下我当时的做法。

for(let elem of val.values()){
    			   if(elem.type=="t"|| elem.type=="v"){
    			     // elem={
    			     //   ...elem,
    			     //   disabled: true
    			     // };
    			    elem.disabled= true;
    			   }
    
    			   if(elem.children ){
    			     this.getTreeList(elem.children);
    			   }
    			}
    			return val ;
    
    }

注意我注释的部分，使用三元运算符， elem=\{ ...elem ,disabled:true\}，原以为没问题，但是检测发现，使用该方式并没用，查下了资料并没有找到原因。希望读完这篇文章的哥们指点一下，在下感激不尽！

附上部分页面代码(有删改，至于为什么你懂。。)：

<el-cascader
            v-model="pid"
            :options="this.treeList"
            :props="moduleProps"
            change-on-select
            ref="cascader"
       ></el-cascader>
    
    data(){
      return (){
        moduleProps: {
    		label: "name",
    		value: "id",
    		children: "children"
    	}
      }
    },
    computed: {
       treeList() {
         return this.TestController.allTree.data;
       } ,
    }

另外附上，表单编辑时，级联框回显的解决方案：  官方文档指出，默认值通过数组的方式指定，即我们通过数组方法给出选中节点的所有的父节点，就能回显。回到本例中，原有数据结构是一个tree ，节点下面有子节点，子节点下面还有节点，为了拿到选中节点的父节点，我在定义了一个变量，一维json数组 idAndParent=\[\] ,然后对原有的数据结构(树)进行遍历， 取出所有的节点id和父节点id(即该节点的parentId)，放进这个一维数组，然后在通过选中节点的id，去一维数组中查找该id，进而拿到paretnId 这样通过递归，就能拿到选中节点的所有父节点，在外部定义数组，每次找到父节点，就把它push到该数组中。下面附上代码：

getIdAndParent(tree, idAndParentIds) {// idAndParentIds用来保存所有节点的id，parentId
    			// 对原有的数据结构进行遍历，拿出所有节点的id，parentId到一个一维数组中。
    			tree.forEach(item => {
    				let mid = {
    					id: item.id,
    					parentId: item.parentId,
    				};
    				idAndParentIds.push(mid);
    				if (item.children) {
    					this.getIdAndParent(item.children, idAndParentIds);
    				}
    			});
    		},
    getId(id, parentIds, idAndParent) {
    			idAndParent.forEach(item => {
    				if (item.id == id) {
    					parentIds.push(id);
    					if (item.parentId != -1) {
    						this.getId(item.parentId, parentIds, idAndParent);
    					}
    				}
    			});
    		},
    // 编辑时 数据回显
    editShow() { // idAndParent保存 Tree所有节点的id和parentId
    	let idAndParent=[];// idAndParent保存 Tree所有节点的id和parentId
            this.getIdAndParent(this.treeList,idAndParent);		
    	let parentIds = []; // 用于保存选中节点的父节点及父节点的父节点
    	this.getId(this.form.parentId, parentIds, idAndParent);
    
    	this.parentId = parentIds.reverse(); //反转数组
    },

我的级联框绑定的就是parentId ，进行编辑操作时，弹出表单时， 触发editShow(),方法， 从而触发了一系列别的方法，最后完成取到选中节点的所有的父节点，并将其赋值给parentId，完成回显。

[20190121171917152.png]: /images/20220325/037010e7650a42da9943b092d184340a.png
[Cascader]: http://element-cn.eleme.io/#/zh-CN/component/cascader