解决方案
<template>
<department-cascader
ref="department"
v-model="formData.department"
class="w100"
clearable
placeholder="请选择部门"
:props="{ multiple: true }"
@handleChange="handleChangeDepartment"
/>
</template>
<script>
export default {
watch: {
'formData.department': {
handler(newArr, oldArr) {
const current = this.findCurrentDepartment(newArr, oldArr)
if (!current) return
this.$nextTick(() => {
if (current.type === 'checked') {
const targetNode = this.$refs.department.$refs.departmentCascader.checkedNodes.find((item) => {
return item.value === current.value
})
if (targetNode) {
this.checkedChildrenDepartment([targetNode])
this.$refs.department.$refs.departmentCascader.$refs.panel.calculateMultiCheckedValue()
}
}
})
},
deep: true
}
},
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'
}
}
}
}
},
}
}