需求
之前的需求是 el-tree 父子节点勾选框半关联，但是现在需求改了，需要：
- 勾选时父子节点关联；
- 数据回显时，父子节点不关联。
即：
分析
传参控制父子节点是否关联 check-strictly
父子节点是否关联是由 check-strictly 这个属性决定的：为 false 表示关联，为 true 表示不关联。
回显时和勾选时，这个属性会变，因此可通过传参方式控制。
注意：业务要求勾选时把半勾选节点也要一起提交
勾选时设定 check-strictly 为 false，通过 getHalfCheckedKeys() 获取半勾选节点。
代码
打开对话框时加载数据
// 加载类下拉框：挂载类的来源
async loadClsOps() {
this.clsOpsLoading = true;
const data = await treeClsOps({
code: this.code,
});
if (data.code === 200) {
this.treeClsOps = data.data.rows;
// 默认勾选节点
this.$refs.menuTree.setCheckedKeys(this.defaultChecked);
this.clsOpsLoading = false;
}
},
点击保存按钮
submit() {
// 调用子组件方法，获取选中的节点和半选中的节点id
const checkedIds = this.$refs.menuTree.getCheckedKeys();
const halfCheckedIds = this.$refs.menuTree.getHalfCheckedKeys();
// 比对 默认勾选节点 和 当前选中节点（此处要包含半选中节点）
this.handleAddOrDelIds(this.defaultChecked, [
...checkedIds,
...halfCheckedIds,
]);
const obj = {
mountIds: this.mountIds,
cancelIds: this.cancelIds,
};
this.$emit("submit-form", obj);
},
/* 处理新增和取消的 ids */
handleAddOrDelIds(beforeIds, afterIds) {
if (!beforeIds.length) {
// before 为空数组：必定是挂载
this.mountIds = afterIds;
} else {
/* before 不为空，判断： */
beforeIds.forEach((ele) => {
if (!afterIds.includes(ele)) {
// before 的项在 after 中找不到：要取消挂载
this.cancelIds.push(ele);
}
});
afterIds.forEach((item) => {
if (!beforeIds.includes(item)) {
// after 的项在 before 中找不到：要挂载
this.mountIds.push(item);
}
});
}
},
总结
对 el-tree官方文档 要多多熟悉。
标签：el,勾选时,关联,父子,beforeIds,节点,before From： https://www.cnblogs.com/shayloyuki/p/17614042.html