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

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

作者: 流泪手心_521 | 来源:发表于2021-01-19 15:42 被阅读0次

    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)
              }
            })
          },
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/sfzqzktx.html