本文例項為大家分享了vue ElementUI實現非同步載入樹的具體程式碼，供大家參考，具體內容如下

路由檔案修改

import List from '@/components/list.vue'
import Add from '@/components/add.vue'
import Tree from '@/components/tree.vue'
import AsynTree from '@/components/asyntree.vue'

export default{
    routes:[
        {path:"/list",component:List},{path:"/add",component:Add},{path:"/add/:id",{path:"/tree",component:Tree},{path:"/asyntree",component:AsynTree}
    ]

}

首頁app.vue

<template>
  <div id="app">
    <router-link to="/add">新增</router-link>&nbsp;&nbsp;
    <router-link to="/list">列表</router-link>&nbsp;&nbsp;
    <router-link to="/tree">樹結構</router-link>&nbsp;&nbsp;
    <router-link to="/asyntree">非同步樹結構</router-link>&nbsp;&nbsp;
    <router-view></router-view>
  </div>
</template>

<script>
import List from './components/list.vue'

export default {
  name: 'app',components: {
    List
  }
}
</script>

<style>
#app {
  font-family: 'Avenir',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e5
 
程式設計客棧0;
  margin-top: 60px;
}
</style>

非同步載入樹頁面

<template>


<el-container>
  <el-aside width="200px">
    <el-tree ref="tree"
    :data="data"
    lazy
    show-checkbox
    node-key="id"
    check-strictly
    :load="loadnode"
    :props="defaultProps"
    @node-click="nodeclick">
    </el-tree>
  </el-aside>
  <el-main>

    <el-form :model="typeinfo" class="demo-form-inline">
    <el-form-item label="ID">
        <el-input v-model="typeinfo.id" readonly></el-input>
    </el-form-item>
    <el-form-item label="分類名稱">
        <el-input v-model="typeinfo.label" placeholder="分類名稱"></el-input>
    </el-form-item>
    <el-form-item label="序號">
        <el-input v-model="typeinfo.seqno" placeholder="序號"></el-input>
    </el-form-item>
   <el-form-item label="父ID">
        <el-input v-model="typeinfo.pid" readonly></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="dosave">儲存</el-button>
        <el-button type="primary" @click="dochildsave">新增節點</el-button>
    </el-form-item>
    </el-form>

  </el-main>
</el-container>

</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            data:[],//樹物件資料模型
            defaultProps: {//樹物件屬性對應關係
                children: 'children',label: 'label'
            },typeinfo: {//商品分類實體物件
                id:'',pid:'',label: '',seqno: ''
            }
        }
    },methods: {
        loadnode(node,resolve){
            //如果展開第一級節點，從後臺載入一級節點列表
            if(node.level==0)
            {
                this.loadfirstnode(resolve);
            }
            //如果展開其他級節點，動態從後臺載入下一級節點列表
            if(node.level>=1)
            {
                this.loadchildnode(node,resolve);
            }
        },//載入第一級節點
        loadfirstnode(resolve){
            axios.get('http://localhost:6060/loadtype')
                .then(function(resp){
                    resolve(resp.data);
                })
        },//重新整理
 
程式設計客棧樹元件
        refreshtree(){
            var _this = this;
            axios.get('http://localhost:6060/loadtype')
                .then(function(resp){
                    _this.data = resp.data;
                })
        },//載入節點的子節點集合
        loadchildnode(node,resolve){
            axios.get('http://localhost:6060/loadtypechild?pid='+node.data.id)
    www.cppcns.com            .then(function(resp){
                    resolve(resp.data);
                })
        },//點選節點上觸發的事件，傳遞三個引數，資料物件使用第一個引數
        nodeclick(data,dataObj,self)
        {
            //alert(data.label+",id="+data.id);
            this.typeinfo.id=data.id;
            this.typeinfo.pid=data.pid;
            this.typeinfo.label=data.label;
            this.typeinfo.seqno=data.seqno;
        },//儲存分類方法
        dosave()
        {
            var _this = this;
             axios.post('http://localhost:6060/savetype',this.typeinfo)
                .then(function(resp){
                    if(resp.data)
                        _this.refreshtree();
                })
        },//儲存子分類方法
        dochildsave()
        {
            //判斷左側樹元件是否選擇了一個節點
            var cnt=this.$refs['tree'].getCheckedNodes().length;
            if(cnt!=1)
            {
                this.$message('必須選擇唯一父節點');
                return;
            }
            //通過this.$refs['tree']獲取樹物件，其中tree是樹元件的ref屬性
            var dataObj = this.$refs['tree'].getCheckedNodes()[0];
    
            this.typeinfo.id='';
            this.typeinfo.pid=dataObj.id;
            var _this = this;
            axios.post('http://localhost:6060/savetype',this.typeinfo)
                .then(function(resp){
                    if(resp.data)
                        _this.refreshtree();
                })
   程式設計客棧     }
    }

}
</script>

後臺Controller

@RequestMapping("/loadtype")
 @ResponseBody
 public List<TypeInfo> getTypejson()
 {
  List<TypeInfo> rtn = getFirstNode程式設計客棧();
  
  return rtn;
 }
  
 @RequestMapping("/loadtypechild")
 @ResponseBody
 public List<TypeInfo> getTypeByPid(Integer pid)
 {
  System.out.println("pid==="+pid);
  List<TypeInfo> rtn = addsrv.getTypeList(pid);
  
  return rtn;
 }
 
 private List<TypeInfo> getFirstNode()
 {
  TypeInfo root = addsrv.getRootType();
  List<TypeInfo> firstList = addsrv.getTypeList(root.getId());
  for(TypeInfo ti:firstList)
   recurseNode(ti);
  return firstList;
 }
 
 private void recurseNode(TypeInfo ti)
 {
  List<TypeInfo> children = addsrv.getTypeList(ti.getId());
  System.out.println("ti.id"+ti.getId()+",children="+children);
  if(children==null || children.size()==0)
   return;
  ti.setChildren(children);
  for(TypeInfo chd:children)
  {
   recurseNode(chd);
  }
 }
 
 @RequestMapping("/savetype")
 @ResponseBody
 public Boolean savetype(@RequestBody TypeInfo ti)
 {
  try {
   Integer id = ti.getId();
   if(id != null)
    addsrv.updateType(ti);
   else {
    addsrv.saveType(ti);
   }
   return true;
  } catch (Exception e) {
   return false;
  }
  
 }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。