elementui tree 重新加载,elementui树懒加载
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现异步加载树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现异步加载树的具体代码，供大家参考，具体内容如下
路由文件修改
从" @/components/list.vue "导入列表
从" @/components/add.vue "导入增加
从" @/components/tree.vue "导入树
从" @/components/asyntree.vue "导入AsynTree
导出默认值{
路线：[
{路径："/List "，组件：List}，
{路径："/Add "，组件：添加}，
{ path:"/Add/:id "，组件：添加}，
{路径："/树",组件：树},
{ path:"/AsynTree "，组件：AsynTree}
]
}
首页app.vue
模板
div id=应用程序
路由器-链接到=/add 添加/路由器链接nbsp .不间断空格
路由器-链接到=/list 列表/路由器链接nbsp .不间断空格
路由器-链接到=/tree 树结构/路由器链接nbsp .不间断空格
路由器-链接到=/asyntree 异步树结构/路由器链接nbsp .不间断空格
路由器视图/路由器视图
/div
/模板
脚本
从导入列表 components/list.vue
导出默认值{
名称："应用程序",
组件：{
目录
}
}
/脚本
风格
#app {
字体系列：《Avenir》，Helvetica，Arial，无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
异步加载树页面
模板
埃尔容器
左侧宽度= 200像素
el-tree ref=tree
:data=data
懒惰的
显示-复选框
node-key=id
严格检查
:load=loadnode
:props=defaultProps
@node-click=nodeclick
/el-tree
/El-旁白
埃尔梅因
El-form:model= type info class= demo-form-inline
El-表单-项目标签=ID
El-input v-model=类型信息。id 只读/El-输入
/El-表单-项目
El-表单-项目标签=分类名称
El-input v-model=类型信息。标签“placeholder=”分类名称/el-input
/El-表单-项目
El-表单-项目标签=序号
El-input v-model= typeinfo。seqno placeholder=序号/el-input
/El-表单-项目
El-表单-项目标签=父ID
El-输入v-model=typeinfo.pid 只读/el-input
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= do save 保存/el-button
El-button type= primary @ click= dochildsave 添加节点/el-button
/El-表单-项目
/el格式
/el-main
/El-容器
/模板
脚本
从" axios "导入爱可信
导出默认值{
data() {
返回{
数据：[],//树对象数据模型
defaultProps: {//树对象属性对应关系
孩子："孩子",
标签:"标签"
},
typeinfo: {//商品分类实体对象
id: ，
pid: ，
标签: ,
序列号：""
}
}
},
方法：{
加载节点(节点，解析){
//如果展开第一级节点，从后台加载一级节点列表
if(node.level==0)
{
这个。loadfirstnode(resolve)；
}
//如果展开其他级节点，动态从后台加载下一级节点列表
if(node.level=1)
{
this.loadchildnode(node，resolve)；
}
},
//加载第一级节点
loadfirstnode(解析){
axios。get( http://localhost:6060/loadtype )。然后（函数（响应){
解决(resp。数据)；
})
},
//刷新树组件
refreshtree(){
var _ this=this
axios。get( http://localhost:6060/loadtype )。然后（函数（响应){
_这个。数据=响应。数据；
})
},
//加载节点的子节点集合
loadchildnode(node，resolve){
axios。get( http://localhost:6060/loadtype child？pid= node.data.id)。然后（函数（响应){
解决(resp。数据)；
})
},
//点击节点上触发的事件，传递三个参数，数据对象使用第一个参数
nodeclick(data，dataObj，self)
{
//alert(data.label ，id= data。id’)；
这个。typeinfo。id=数据。id；
这个。typeinfo。PID=数据。PID
这个。类型信息。标签=数据。标签；
这个。typeinfo。seqno=数据。seqno
},
//保存分类方法
dosave()
{
var _ this=this
axios。post( http://localhost:6060/save type ，this.typeinfo)。然后（函数（响应){
如果(响应数据)
_这个。刷新树()；
})
},
//保存子分类方法
dochildsave()
{
//判断左侧树组件是否选择了一个节点
var cnt=this .$refs[tree].getCheckedNodes().长度；
如果(cnt！=1)
{
这个. $消息(必须选择唯一父节点);
返回；
}
//通过这个refs[tree]获取树对象，其中树是树组件的裁判员属性
var dataObj=this .$refs[tree].getCheckedNodes()[0]；
这个。typeinfo。id=
这个。typeinfo。PID=数据对象。id；
var _ this=this
axios。post( http://localhost:6060/save type ，this.typeinfo)。然后（函数（响应){
如果(响应数据)
_这个。刷新树()；
})
}
}
}
/脚本
后台控制器
@RequestMapping(/loadtype )
@ResponseBody
public ListTypeInfo getTypeJson()
{
ListTypeInfo RTN=get first node()；
返回回路
}
@请求映射(/loadtype child )
@ResponseBody
public ListTypeInfo getTypeByPid(整数Pid)
{
系统。出去。println( PID=== PID)；
ListTypeInfo RTN=addsrv。gettypelist(PID)；
返回回路
}
private ListTypeInfo获取第一个节点()
{
键入info root=addsrv。getroottype()；
ListTypeInfo first list=addsrv。gettype列表(根。getid())；
for(TypeInfo ti:firstList)
递归节点(ti)；
返回第一列表
}
私有空的递归节点（类型信息ti)
{
ListTypeInfo children=addsrv。gettype列表(ti。getid())；
系统。出去。println( ti。id ti。getid()，children= children)；
if(children==null children。size()==0)
返回；
ti.setChildren(儿童);
for(TypeInfo chd:children)
{
递归节点（冠心病);
}
}
@RequestMapping(/savetype )
@ResponseBody
公共布尔存储类型(@RequestBody TypeInfo ti)
{
尝试{
整数id=ti。getid()；
如果(id！=空)
添加SRV。更新类型(ti)；
否则{
添加SRV。保存类型(ti)；
}
返回真实的
} catch(异常e) {
返回错误的
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。