需求

之前的需求是 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);
          }
        });
      }
    },