问题
有个节点带 checkbox 的 el-tree 父子节点需要半关联，即：
1.勾选父节点，子节点不会被勾选；
2.但是勾选子节点，父节点会被勾选。
解决
第一步：实现父子节点不相互关联
子组件：
父组件：
第二步：实现勾选子节点，父节点会被勾选
初步思路是：监听每个节点，若被勾选，则勾选它的父节点。即：
通过 check-change 判断：若当前节点被勾选，则勾选它的父节点。
子组件 MenuTree：
@check-change="(data, checked, indeterminate) => $emit('custom-check-change', {data, checked, indeterminate})"
// 通过 key / data 设置某个节点的勾选状态 // key/data, checked, deep
setChecked(key, checked, deep) {
this.$refs.tree.setChecked(key, checked, deep);
},
父组件：
@custom-check-change="customCheckChange"
// 自定义树节点的 check-change 事件
customCheckChange(argus) {
const { data, checked } = argus
// 若当前节点勾选，则也勾选父节点
if (!data.pid) return
if (checked) {
// nodeKey 为 el-tree 的 node-key，默认为 'id'
const { nodeKey, nodeData, setChecked } = this.$refs['menuTree']
if (nodeKey === 'id') {
setChecked(data.pid, true)
} else {
// 树形扁平化 // this.extractTree() 为封装的公共方法
const flatNodeData = this.extractTree(nodeData,'children')
const target = flatNodeData.find(ele => ele.id == data.pid)
if (target) {
setChecked(target[nodeKey], true)
}
}
}
}
效果
