element-ui Tree之懒加载叶子节点强制设置父级半选效果

爷傲奈我何!2024-07-04 22:06

效果：

前言：

我们是先只展示一级的，二级的数据是通过点击之后通过服务器获取数据，并不是全量数据直接一起返回回来的。

问题：

当你设置了默认选中的子节点，但是由于刚进入页面此时tree中数据暂是没有这个子节点时，其父节点并不会具有半选效果

issue地址：

[Feature Request] tree components support setHalfCheckedNodes and setHalfCheckedkeys · Issue #13500 · ElemeFE/element · GitHub

html代码：

html 复制代码

<el-tree
   ref="tree"
   :props="{
      label: 'Name',
      isLeaf: 'IsLeaf',
   }"
   :load="loadNode"
   lazy
   show-checkbox
   :filter-node-method="filterNode"
   node-key="Id"
   :default-checked-keys="defaultCheckedKeys"
   @check-change="handleCheckChange"
></el-tree>

需要回显数据：

javascript 复制代码

selectDoctorInfo: [
        {
          Type: 1,
          RelationId: '68d5d334-4eff-4cf4-8152-fa6a45546dae', // 子级的 id
          OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3', // 父级的 id
        },
        {
          Type: 1,
          RelationId: '08478d81-9582-4151-9288-fca71beb43fb',
          OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3',
        },
        {
          Type: 2,
          RelationId: '63daa04f-be13-481a-8e5e-6160fee89203',
          OrgId: '63daa04f-be13-481a-8e5e-6160fee89203',
        },
      ]

核心代码：

javascript 复制代码

onEchoTreeData() {
      // 接口返回已选择的数据  allHospitalList: 一级的全部数据  selectDoctorInfo: 需要回显的数据 
      const selectKeys = [];
      this.selectDoctorInfo.forEach((v) => {
        this.allHospitalList.forEach((s) => {
          if (v.Type === 1) {
            if (s.Id === v.OrgId) {
              selectKeys.push(v.RelationId);
              this.$nextTick(() => {
                var node = this.$refs.tree.getNode(v.OrgId); // 拿到父级的 id
                if (node) {
                  // 这里是核心代码
                  node.indeterminate = true // indeterminate强制设置为半选
                }
              })
            }
          }
          if (v.Type === 2) {
            if (s.Id === v.RelationId) {
              selectKeys.push(v.RelationId);
            }
          }
        });
      });
      this.defaultCheckedKeys = selectKeys;
    },