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

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

如上图所示，假如 ecs为v类型，则不允许选中其子节点。 按照以往经验，简单分析，应该是树的这个节点添加一个字段就能实现禁用，果不其然，去饿了么官网查看得知（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，完成回显。