今日，在vue项目中使用饿了么的Cascader级联选择器时，遇到了一个问题，情景时这样的， 数据是从后台拿到的，前端要做出的效果是当满足某些条件时，某些选项禁止选中。花了很长时间解决这个问题，于是写这篇文章记录解决方案。
如上图所示，假如 ecs为v类型，则不允许选中其子节点。 按照以往经验，简单分析，应该是树的这个节点添加一个字段就能实现禁用，果不其然，去饿了么官网查看得知（Cascader级联选择器），添加一个disabled属性即可。
于是对后端返回的数据进行如下处理：
getTreeList(val) {//对 treeList 进行递归操作，禁止选中t和vval &&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-cascaderv-model="pid":options="this.treeList":props="moduleProps"change-on-selectref="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和parentIdlet idAndParent=[];// idAndParent保存 Tree所有节点的id和parentIdthis.getIdAndParent(this.treeList,idAndParent);let parentIds = []; // 用于保存选中节点的父节点及父节点的父节点this.getId(this.form.parentId, parentIds, idAndParent);this.parentId = parentIds.reverse(); //反转数组},
我的级联框绑定的就是parentId ，进行编辑操作时，弹出表单时， 触发editShow(),方法， 从而触发了一系列别的方法，最后完成取到选中节点的所有的父节点，并将其赋值给parentId，完成回显。
