本文實例為大家分享了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',component:Add},{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: #2c3e50; 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).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; } }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。