做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看element的组件说明时发现它的tree控件可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。本文主要和大家介绍vue基于element构建自定义树的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
控件演示
github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！
控件使用
概要
立即学习“前端免费学习笔记（深入）”；
基于element-ui树形控件的二次封装
提供编辑、删除节点的接口
提供一个next钩子，在业务处理失败时可使用next(false)回滚操作
控件源码见 github
文档
props
属性 说明 类型value源数据，可使用v-model双向绑定Array
events
事件名 说明 参数SaveEdit点击编辑或者添加树节点后的保存事件(父节点数据、当前节点数据、next)DelNode删除节点事件(父节点数据、当前节点数据、next)NodeClick节点点击事件(当前节点数据)
源数据描述
属性 说明value树节点的唯一标识label树节点的显示名称status(1：编辑状态)(0：显示状态)(-1不可编辑状态)children子节点数据
调用示例
SaveEdit(parentNode,data,next){ var param = { parentNode:parentNode, node:data } this.$http.post(URL,param).then((response) => { if(response.status == 200){ next(true,response.body.data.nodeId) }else{ next(false) } })}
登录后复制
实现方式
构建子节点的模板
{{node.label}}
登录后复制
子节点通过$emit通知父节点事件
SaveEdit(){ //保存节点事件 this.$emit('SaveEdit',this.nodeData)},
登录后复制
父节点核心实现，使用renderContent函数加载子节点模板，点击保存节点时将业务参数保存在runParam中用于在业务操作失败（网络请求失败、服务端异常等情况）的数据回滚
//子节点模板 renderContent(h, { node, data, store }) { return h(TreeItem,{ props:{ value:data, treeNode:node }, on:{ input:(node)=>{ data = node }, Append: () => { node.expanded = true data.children.push({ value: this.$utilHelper.generateUUID(), label: '请输入模块名称', children: [],status:1,isAdd:true }) }, //保存节点 SaveEdit:(nodeData)=> { //递归查找父节点 var parentNode = this.$utilHelper.getNode(this.treeData,data.value).parentNode this.runParam.parentNode = parentNode this.runParam.data = data this.runParam.nodeData = nodeData this.$emit('SaveEdit',parentNode,data,this.CanSaveNext) } } }) }
登录后复制
操作结果钩子，如果next函数传入false则判定操作失败，使用runParam中的参数进行回滚，该节点的编辑保存操作将无效。
相关推荐：
vuejs使用递归组件实现树形目录
PHP实现从上往下打印二叉树的方法
JavaScript实现树的遍历算法示例
以上就是vue基于Element构建自定义树实例方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787371.html
