需求:选中节点时,各层级父子都要选中,取消节点时,所有子节点取消选中;子节点全部取消时,父节点不取消
1.设置父子节点完全不关联 checkStrictly: true 手动控制父子节点选择后的处理
:checkbox-config="{ checkField: 'checked', highlight: true, checkStrictly: true, checkMethod, showHeader: true }"
@checkbox-change="({ row, checked }) => checkboxChange(row, checked)"
2、如果是选中则设置所有父子节点为选中状态,反之则设置子节点状态为取消状态
checkboxChange(row, checked) {
if (checked) {
this.selectedParent(row.pid)
}
this.setChild([row.id], checked)
}
setChild(pIds = [], checked) {
const childArr = this.dataSource.filter(item => pIds.includes(item.pid))
if (childArr.length) {
const ids = []
childArr.forEach(item => {
item.checked = checked
ids.push(item.id)
})
this.setChild(ids, checked)
}
}
selectedParent(pid) {
if (!pid) return
this.dataSource.some(item => {
if (item.id === pid) {
item.checked = true
this.selectedParent(item.pid)
}
return item.id === pid
})
}