问题:
在获取数据源进行选择后,根据动态获取禁用数据进行禁用选项时,为显示数据源父级与子级添加disabled属性为true时,父级选项无法进行禁用,子级可以的问题
原因:
cascader级联选择器没有重新渲染,导致父级再设置disabled属性时,虽然赋值成功,但是因为没有重新渲染,显示的选项仍然可以进行选取,而子级数据因为点击时进行了重新渲染,所以子级的禁用项可以禁用成功。
图一:(为想要禁用的选项设置 disabled 属性为 true )
图二:(设置完属性后,选项数据中的子级可以进行禁选,但是父级仍然可以选择)
解决办法:
第一种:
为cascader级联选择器添加 key 值,并在数据设置更新完成后设置key值
<el-cascader :key="cascaderKey" :options="options" :props="cascaderAttribute" > <template slot-scope="{ node, data }"> <span>{{ data.label }}</span> <span v-if="!node.isLeaf"> ({{ data.children.length }})</span> </template> </el-cascader> //省略多行无关代码 // 更新选项数据 tempBusinessList.forEach((o) => { this.options.forEach((i) => { if (i.value === o.id) { i.disabled = true; i.children.forEach((a) => { a.disabled = true; }); } }); }); // 设置 key 值 this.cascaderKey = Math.random();
第二种:
其他大佬的文中还提到可以在cascader选择器添加 v-if 属性 进行true与false交替达到重新渲染的结果,但是我没试过,说是不够流畅,可自己尝试。