vue+element-ui el-tree 多层

//html部分
<el-tree
  :load="loadNode1"
  lazy
  :props="defaultProps"
  accordion>
</el-tree> 

//data return
 defaultProps:  {
    label: 'label',
    children:'children',
    isLeaf: 'leaf'}
}

//懒加载 
loadNode1(node, resolve) {
  console.log(node)
  switch(node.level)
  {
    case 0:
      return resolve([{ label: this.fuzaiIp }]);
      break;
    case 1:
      this.$api.get('lbaas/listener/?loadbalancerId='+this.fuzaiId +'&region='+ this.region.id,null, r=> {
        this.healthDetails[this.fuzaiId]=r.data
        let tree = []
        for (let i in this.healthDetails[this.fuzaiId]){
          let healthDetail = this.healthDetails[this.fuzaiId][i]
          let obj = {}
          let arr = []
          //第二级label
          obj.label = healthDetail.protocol+'['+healthDetail.protocolPort+'] ['+healthDetail.name+']'

          for(let k in healthDetail.members){
            let l = healthDetail.members[k]
            //第三级 label members层
            arr.push({label:l.address +'端口:'+l.protocolPort+'权重:'+l.weight, leaf: true})
          }
          obj.children = arr
          tree.push(obj)
        }
        resolve(tree);
      },f=>{

      })
      break;
    case 2:
      resolve(node.data.children);
      break;
    default:
      return resolve([]);
  }
},

猜你喜欢

转载自blog.csdn.net/weixin_42127141/article/details/88303650