element tree懒加载

html使用两个方法

//树    点击方法,展开方法   
<el-tree
          :props="props"
          :load="loadNode"
          lazy
          @node-click="clickTree"
          @node-contextmenu="newChildTree"
          node-key="id"
          ref="tree"
          :style="{
            overflow: 'auto',
            width: divTree.width + 'px',
          }"
        >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span  class="operate">
              <i
              v-if="data.type!='staticScope'&&data.type!='group'"
                class="iconfont icon-icon-test"
                @click="editGroup(data, node)"
                style="font-size: 20px"></i>
              <i
                v-if="data.type!='staticScope'&&data.type!='group'"
                class="iconfont icon-sami-select"
                @click="deleteGroup(data, node)"
                style="font-size: 20px"></i>
              <i
              v-if="data.type!='staticScope'"
                class="iconfont icon-add-select"
                @click="newGroup(data, node)"
                style="font-size: 20px; ,margin-left: 10px"
              ></i>
            </span>
          </span>
        </template>
        </el-tree>

方法操作

//点击 右侧是路由,点击刷新
clickTree(data, node) {
 else if (node.parent.data && node.parent.data.name === '管理') {
        this.$router.push({
          name: 'device',
          params: {
            group: data.name,
            group_id: data.groupId,
            gateway_uuid: data.gateway_uuid,
          },
        }).then(() => {
          this.menukey++;
        });
  else if(data.name === '管理'){
}
}

展开懒加载

//展开函数
loadNode(node, resolve) {
      else if (node.data.name === '设备管理') {     
          this.deviceNode = node;
         axios.get('egrouplist?account_id=1&parent_id=0').then((res) => {
            const data = [];
            const deviceData = res.data.data
            for (let i = 0; i < res.data.data.length; i++) {
              let id = res.data.data[i].group_id
              let deviceName = res.data.data[i].group_name
              let isLeaf = false
              this.deviceNamedata.push(deviceName) 
             axios.get('uplist?account_id=1&parent_id='+id).then((res) => {
                   if(res.data.data.length == 0){
                         isLeaf = true
                    }
                    else{
                      isLeaf= false
                    } 
             data.push({
                name: deviceName, 
                leaf: isLeaf,
                groupId:deviceData[i].group_id,
                parentId:deviceData[i].parent_id,
                deep:deviceData[i].parent_id,
                accountId:deviceData[i].account_id,
                type:'device'
              });
              // console.log();
               resolve(data);      
              })
            }
            
          });
    
        },
    //子
 for(let j= 0;j<this.deviceNamedata.length;j++){
        let nadata = []
        if(node.data.name === this.deviceNamedata[j]){       
            const data = [];
            this.deviceNode = node;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
            let groupId = node.data.groupId
          axios.get('devicegrouplist?account_id=1&parent_id='+groupId).then((res) => {
             const deviceData = res.data.data
            for (let i = 0; i < res.data.data.length; i++) {
              let id = res.data.data[i].group_id
              let isLeaf = false
             this.deviceNamedata.push(res.data.data[i].group_name)
            axios.get('evicegrouplist?account_id=1&parent_id='+id).then((res) => {
                    if(res.data.data.length == 0){
                         isLeaf = true
                    }
                    else{
                      isLeaf= false
                    } 
               data.push({
                name: deviceData[i].group_name, 
                leaf: isLeaf,
                groupId:deviceData[i].group_id,
                parentId:deviceData[i].parent_id,
                deep:deviceData[i].parent_id,
                accountId:deviceData[i].account_id,
                type:'device'
              });
              resolve(data);
            })  
            }
            
          });
          } 
          
          }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值