本文实例为大家分享了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>
<router-link to="/list">列表</router-link>
<router-link to="/tree">树结构</router-link>
<router-link to="/asyntree">异步树结构</router-link>
<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;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
黄山市民网：https://www.huangshanshimin.com/
