el-tree的复选框勾选的回显效果 --多接口的

这个是父组件的

<rolePop v-if="showRoleOrganization" ref="dialogRoleOrganization" @initData="initData" @onAddSuccess="onAddJgSuccess"/>

这个是子组件， load中的“loadNode”是可以直接渲染数据的，所以，这个方法中请求了两个接口，

因为是懒加载所以，一个是最顶层头部请求，一个是加载的接口，

<template>
    <el-dialog
      class="eldialog"
      :visible.sync="visible"
      :title="title"
      :close-on-click-modal="false"
      width="40%"
      top="2vh"
      append-to-body
      @close="closeDialog"
      v-loading="loading"
      :destroy-on-close="true"
      :close-on-press-escape="false"
    >
      <div style="height: 440px; overflow-y: auto; overflow-x: hidden">
        <el-tree
          v-if="visible"
          ref="tree"
          :props="props"
          :load="loadNode"
          :default-checked-keys="checkedId"//这个是回显高亮的存储数组
          lazy
          show-checkbox
          :key="treeKey"
        >
        </el-tree>
      </div>
      <template slot="footer">
        <el-button type="success" size="medium" @click="onSubmit">保存</el-button>
        <el-button type="danger" size="medium" @click="visible = false"
          >取消</el-button
        >
      </template>
    </el-dialog>
  </template>
    <script>
  export default {
    name: "Tree",
    data() {
      return {
        title: "机构",
        visible: false,
        roleId: "",
        valid: "",
        dataForm: {
          roleId: "",
          semiId: [],
        },
        props: {
          label: "jg_mingcheng",
          id: "jg_id",
          code: "jg_bianma",
          children: "children",
          parentId: "jg_shangji",
          type: "jg_leixing",
          icon: "icon",
          shortName: "jgjc",
          isLeaf: "leaf",
        },
        // 默认选中的
        checkedId: [],
        // 默认展开
        defaultCheckedId: [],
        loading: false,
        data: [],
        flag: "1",
        nodeId: "",
        getRoleDeptsData: [],
        node: "",
        node_had:'',
        resolve_had :'',
        treeKey: ''
      };
    },
    methods: {
      async initItemPermissions(params) {
        this.articlesData = null;
        this.roleId = params.roleId;
        this.visible = true;
        this.checkedId = []
        this.treeKey = Date.now()
      },
  
      initGetRoleTreeList() {
        return new Promise((resolve, reject) => {
          const paramsTreeList = {
            data: {
              roleId: this.roleId,
            }
          };
          getRoleTreeList(paramsTreeList).then((result) => {
            if (result.result) {
              this.getRoleDeptsData = result.resultdata.data;
              resolve(this.getRoleDeptsData);
            }
          });
        });
      },
      loadNode(node, resolve) {
        if (true) {
          this.initGetRoleTreeList().then((res) => {
            // 第一次加载需要等待 选择的数据接口请求完成以后才，调用全部数据
            // 再 判断是否有需要回显对勾的
            this.getAllTree(node).then((res) => {
              let list = res.map((e) => {
                let checked = false;
                this.getRoleDeptsData.forEach((item) => {
                  this.checkedId.push(item.orgId);
                });
                return {
                  ...e,
                  checked,
                };
              });
              this.setChildNodeChecked(node, 100);
              resolve(list);
            });
          });
        }
        this.t_node = node;
        this.t_tree_resolve = resolve
      },
      getAllTree(node) {
        return new Promise((resolve, reject) => {
          if (node.level === 0) {
            const paramsNew = {
              flag: this.flag,
              data: {
                roleId: this.roleId
              },
            };
            treeLazyHeader(paramsNew).then((resultdata) => {
              if (resultdata.result) {
                resolve(resultdata.resultdata);
              } else {
                resolve();
              }
            });
          }
  
          if (node.level > 0) {
            const params = {
              flag: this.flag,
              data: {},
              jg_id: node.data.jg_id,
            };
            getTreeLeafLazy(params).then(function (result) {
              if(result.result){
                resolve(result.resultdata);
              }else{
                resolve();
              }
            });
          }
        });
      },
      /* 删除节点后重载树 操作节点后调用方法 */
      refsh() {
        if(this.t_node && this.t_tree_resolve) {
          this.loadNode(this.t_node, this.t_tree_resolve)
        }
      },
      setChildNodeChecked(node, time) {
        this.node = node;
        setTimeout(() => {
          let count = 0;
          node.childNodes &&
            node.childNodes.forEach((cell) => {
              if (!this.checkedId.find((val) => val == cell.data.jg_id)) {
                count += 1;
                cell.checked = false;
              } else {
                cell.checked = cell.checked;
              }
            });
          if (count != 0 && node.childNodes.length != count) {
            node.checked = false;
            node.indeterminate = true;
          }
        }, time);
      },
  
      // 表单提交 -- 保存
      async onSubmit() {
        this.loading = true;
        const res = this.$refs.tree.getCheckedNodes(); // getCheckedNodes(false, true) 第一个参数 是否只获取叶子结点，第二个参数：当父节点下不全选的时候，也获取父节点的id
        const params = {
          data: {
            roleId: this.roleId,//是勾选的父组件表格中具体的某一个人
          },
        };
  
        treeSave(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.treeKey = Date.now()
            this.refsh()
            this.visible = false;
            this.loading = false;
          }
        });
      },
      //关闭弹框的事件
      closeDialog() {
        this.treeKey = Date.now()
        this.visible = false;
        this.refsh()
        this.$emit("onAddSuccess", this.visible);
      },
    },
  };
  </script>
    
  <style scoped>
  </style>
    

这个是在保存之后再次点击展开能够正常回显的，因情况而定