问题描述:
el-cascader组件级联选择的checkStrictly属性设置成父子节点不关联时,父节点和子节点都是可以被勾选的。但是产品又要求勾选子节点时,就不要对应的父节点了,所以需要写一个过滤父节点数据的算法。
选中节点 好好好555000/999 时,取消先前选中的 好好好555000 节点。
代码:
1. 模板代码片
<el-cascader
ref="cascader"
v-model="form.dict"
v-loading="loading"
:props="props"
:options="cascaderOptions"
@change="handleChange"
/>
属性说明:
v-model:选中项绑定值
props:配置选项
options:可选项数据源
@change:当选中节点变化时触发
2. 选中节点变化时代码片
在选择节点操作时过滤数据
handleChange(val) {
const newVal = cloneDeep(val)
if (newVal && newVal.length) {
for (let i = 0; i < newVal.length - 1; i++) {
for (let j = i + 1; j < newVal.length; j++) {
if (newVal[i] && newVal[j] && this.isParent(newVal[i], newVal[j])) {
newVal.splice(i, 1) // 过滤掉已经选了子节点的父节点
i--
}
}
}
this.form.dict= newVal
}
},
// 判断是否是父级节点
isParent(arr1, arr2) {
if (arr1.length > arr2.length) {
return false
}
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) {
return false
}
}
return true
}