vue基于Element构建自定义树的示例代码

说明

做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。

控件演示

github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！

控件使用

概要

• 基于element-ui树形控件的二次封装
• 提供编辑、删除节点的接口
• 提供一个next钩子，在业务处理失败时可使用next(false)回滚操作
• 控件源码见 github

文档

props

属性 说明 类型

events

事件名 说明 参数 添加树节点后的保存事件删除节点事件

源数据描述

属性 说明 显示名称显示状态)(-1不可编辑状态)

调用示例

rush:js;">

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)
}
})
}

实现方式

构建子节点的模板

rush:xhtml;"> checkmark-circled" @click="SaveEdit">确认 checkmark-circled" @click="CancelEdit">取消

子节点通过$emit通知父节点事件

rush:js;"> SaveEdit(){ //保存节点事件 this.$emit('SaveEdit',this.nodeData) },

父节点核心实现，使用renderContent函数加载子节点模板，点击保存节点时将业务参数保存在runParam中用于在业务操作失败（网络请求失败、服务端异常等情况）的数据回滚

rush:js;"> //子节点模板 renderContent(h,{ node,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,this.CanSaveNext) } } }) }

操作结果钩子，如果next函数传入false则判定操作失败，使用runParam中的参数进行回滚，该节点的编辑保存操作将无效

源码demo：calebman/vue-DBM

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。