如何实现Element树形控件Tree在懒加载模式下的动态更新

1.左右布局 点击左边的树（一个） 切换右边的树（一个），出来不同的数据

image.png

思路：
1.在左边树的change事件中调用 右边懒加载的tree
2.调用之前必须清空子节点
3.第一次调用之前必须先存一下node 和reoslve
直接上代码,html的结构

<div class="dialogLift">
            <el-tree
                    :data="data"
                    :props="defaultPropsGroup"
                    highlight-current
                    node-key="orgCode"
                    default-expand-all
                    @node-click="handleNodeClick"
                    :default-expanded-keys="defaultShowNodes"
                    :default-checked-keys="[3]"
            ></el-tree>
          </div>
          <div class="dialogRight">
            <el-checkbox class="checkAll">全选</el-checkbox>
            <!--机构部门-->
            <el-tree
                    v-model="dialogForm.orgNodes"
                    accordion
                    class="org_div"
                    @check-change="handleCheckChange"
                    :props="props"
                    :load="loadNode"
                    :lazy="lazy"
                    show-checkbox
                    node-key="orgCode"
                    ref="tree">
            </el-tree>
          </div>

data里面定义的

props: {
          label: 'orgName',
          children: 'children'
        },
        //组织架构
        defaultPropsGroup:{
          children: 'children',
          label: 'orgName'
        },
        data:[],
        active:'',
        resolve:[],//加载数据的方法里把node，reslove存起来
        node:[],

methods方法中

//默认加载组织架构tree
      getDeptList(){
        contentMngAddEditApi.deptTree().then(res=>{
          if(res.status===0){
            this.data=[{
                  id: 0,
                  orgName: '组织架构',
                  children: res.data.map(item=>{
                      return item
                    })
            }]
          }else{
            this.$message.error(res.message)
          }
        }) .catch((error) => {
          console.log('/announce/dept/auth/tree默认加载组织架构tree', error)
        });
      },
      //组织架构节点被点击时的回调
      handleNodeClick(data) {
        this.node.childNodes = [];  // 把子节点清空，否则下次加载时会直接往里push子节点导致重复
        this.loadNode(this.node,this.resolve,data); //手动调用加载数据方法
        this.active=data.id
      },
      // 加载树型组织部门信息
      loadNode(node, resolve,data) {
        let params = {};
        if(data&&data.id===0){
          return
        }
        if(data===undefined&&node.data===undefined){
          // params={//默认是集团
          //   deptType:1,
          //   orgCode:"FIRST"
          // }
          params={//默认常用群组
            deptType:2,
            orgCode:"1"
          }
        }else if(data===undefined){
          params={
            deptType:node.data.deptType,
            orgCode:node.data.orgCode
          }
        }else{
          params={//点击传参数
            deptType:data.deptType,
            orgCode:data.orgCode
          }
        }
        contentMngAddEditApi.organizationsTree(params).then(res => {
          if (res.status == 0) {
            if (node.level === 0) {//必须判断一下，否则Tree树形控件节点一旦展开，就不再重新加载节点数据
              this.node=node;
              this.resolve=resolve;
              this.node.childNodes = [];  // 把子节点清空，否则下次加载时会直接往里push子节点导致重复
            }
            return resolve(res.data)
          } else {
            return this.$message.error(res.message)
          }
        })
      },