vue+element-ui异步加载树结构－前端(全)

element-ui异步加载行政区划树
功能：进入页面，左侧显示行政区划树的顶级目录，单击目录左侧的箭头，则向后端发送请求，获得该级目录的子目录；以此类推；点击目录本身，则向后端发请求和右边的列表进行联动；

首先说后台返回的数据构成：ａｊａｘ的列表
  id-uuid label-名称 ztreeType-（0显示行政区划下的子区划，1显示行政区划下的部门） hasChild-是否有子节点

前端树代码：
  <el-tree
    :props="defaultProps"  //这个很重要，element-ui的树自带node属性，这个属性要和后端返回的数据映射
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :default-expand-all="false"
    ref="tree"
    lazy
    :load="loadNode"
    node-key="id"
    highlight-current
    @node-click="handleNodeClick"
  >
  </el-tree> 
属性：
  defaultProps:{
    children:[],
    label:'label',
    id:'id',
    isLeaf:'hasChild'
  },

方法：
//筛选节点
  filterNode(value,data){
    if(!value) return true;
    return data.label.indexOf(value)!==-1;
  }
//节点单击事件
  handleNodeClick(data){
    this.queryParams.deptId = data.id;
    getList();
  }
//异步树叶子节点懒加载逻辑
  loadNode(node,resolve){
    //此方法是进入页面后自动运行的,两个参数也是默认加载的
    //一级节点处理
    if(node.level==0){
      this.requestTree(resolve);
    }
    //其余节点处理
    if(node.level>=1){
      this.getIndex(node,resolve);
    }
  },
//首次加载一级节点数据函数
  requestTree(resolve){
    regionTree({regionCode:370000}).then(response=>{
      response.data.forEach(item=>{
        if(item.hasChild=='true'){
          item.hasChild = false
        }else{
          item.hasChild = true
        }
      })
      resolve(response.data)
    }).catch(err=>{})
  },
//异步加载叶子节点函数
getIndex(node,resolve){
  regionTree({regionCode:node.key}).then(res=>{
    res.data.forEach(item=>{
      if(item.hasChild=='true'){
        item.hasChild = false
      }else{
        item.hasChild = true
      }
    })
    resolve(res.data);
  }).catch(err=>{})
},