<el-cascader
ref="cascader"
v-model="userFrom.major"
:show-all-levels="false"
:props="{ value: 'id',label: 'name',children: 'childList', multiple: true,checkStrictly: true}"
:options="subject"
/>
watch
watch: {
'userFrom.major': {
handler(newArr, oldArr) {
const current = this.findCurrentDepartment(newArr, oldArr)
if (!current) return
this.$nextTick(() => {
if (current.type === 'checked') {
// 从级联选择器中取出内部的节点数组,找到当前节点
const targetNode = this.$refs.cascader.checkedNodes.find((item) => {
return item.value === current.value[current.value.length - 1]
})
if (targetNode) {
// 递归找出所有子孙节点,并手动勾选
this.checkedChildrenDepartment([targetNode])
// 更新视图
this.$refs.cascader.$refs.panel.calculateMultiCheckedValue()
}
}
})
},
deep: true
}
},
methods
methods: {
checkedChildrenDepartment(list = []) {
list.forEach((item) => {
item.doCheck(true)
if (item.children.length > 0) {
this.checkedChildrenDepartment(item.children)
}
})
},
findCurrentDepartment(newArr, oldArr) {
const catchNewArr = [...newArr]
const catchOldArr = [...oldArr]
if (catchNewArr.length > catchOldArr.length) {
console.log('为添加')
for (let i = 0; i < catchNewArr.length; i++) {
const targetIndex = catchOldArr.indexOf(catchNewArr[i])
if (targetIndex === -1) {
return {
value: catchNewArr[i],
type: 'checked'
}
}
}
} else {
console.log('为取消')
for (let i = 0; i < catchOldArr.length; i++) {
const targetIndex = catchNewArr.indexOf(catchOldArr[i])
if (targetIndex === -1) {
return {
value: catchOldArr[i],
type: 'cancel'
}
}
}
}
},
}