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

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

最近在根据需求，需要用到树形控件，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() 刷新子节点数据

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组件中动态加载、新增、更新节点的实现方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!