elementel-tree组件中动态加载、新增、更新节点的实现方法-创新互联

这篇文章主要介绍了element el-tree组件中动态加载、新增、更新节点的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

为零陵等地区用户提供了全套网页设计制作服务,及零陵网站建设行业解决方案。主营业务为网站制作、成都网站设计、零陵网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

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

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

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

符合需求,啦啦啦

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

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
}

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

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

let arr = 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
  })
 }

感谢你能够认真阅读完这篇文章,希望小编分享的“element el-tree组件中动态加载、新增、更新节点的实现方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文名称:elementel-tree组件中动态加载、新增、更新节点的实现方法-创新互联
分享路径:http://myzitong.com/article/pgeih.html