好资源导航 » 文章资讯 » element el-tree组件的动态加载、新增、更新节点的实现

element el-tree组件的动态加载、新增、更新节点的实现

2023-07-31 13:02:04 82

最近在根据需求，需要用到树形控件，ele的封装了树形控件正好拿来用，用的途中遇到一些问题就总结下，哈哈哈

说正事，我需要动态的加载出整个树形结构，刚好就有

符合需求，啦啦啦

用的时候出现问题了，我要如何把后台返回个我的数据加载到表里呢，上菜。。。

el-tree标准样式了

部分

动态的加载树形数据这里通过对ele提供的方法
这里对el-tree的样式做了些许的改变
这个看个人需要了


.el-tree-node__content{
line-height:50px;
.custom-tree-node{
width:100%;
display:block;
.fl{
float:left;
line-height:31px;
}
.fr{
float:right;
margin-right:50px;
}
}
}

动态加载节点数据，这里通过ele提供的loadNode（）方法可以根据个人需要改写

这里我是用弹出框进行信息的管理
实现动态的后台数据更新和前台显示的刷新，

addDialogShow(node,data,flag){
	this.node=node//这里对nodetree进行了预先存储
this.nodedata=data
}

然后在更行后台api成功后通过Vue.$set()刷新子节点数据

letarr=Object.assign({},this.addForm)//获取输入框输入的数据

updatetype(this.pid,data).then(res=>{
this.$set(this.node.data,'Name',arr.name)//同步刷新
this.addDialog=false
this.$notify.success({
message:'更新成功',
duration:2000
})
}).catch(()=>{
this.addDialog=false
})
}

到此这篇关于elementel-tree组件的动态加载、新增、更新节点的实现的文章就介绍到这了,更多相关elementel-tree动态加载、新增、更新节点内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

element el-tree组件的动态加载、新增、更新节点的实现

热门推荐

随机推荐