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

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

说明

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

控件演示

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

控件使用

概要

基于element-ui树形控件的二次封装

提供编辑、删除节点的接口

提供一个next钩子，在业务处理失败时可使用next(false)回滚操作

控件源码见 github

文档

props

属性

说明

类型

value

源数据，可使用v-model双向绑定

Array

events

事件名

说明

参数

SaveEdit

nsliZp 点击编辑或者添加树节点后的保存事件

(父节点数据、当前节点数据、next)

DelNode

删除节点事件

(父节点数据、当前节点数据、next)

NodeClick

节点点击事件

(当前节点数据)

源数据描述

属性

说明

value

树节点的唯一标识

label

树节点的显示名称

status

(1：编辑状态)(0：显示状态)(-1不可编辑状态)

children

子节点数据

调用示例

v-model="tableTree"

@SaveEdit="SaveEdit"

@DelNode="DelNode"

@NodeClick="handleNodeClick">

v-model="tableTree"

@SaveEdit="SaveEdit"

@DelNode="DelNode"

@NodeClick="handleNodeClick">

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中用于在业务操作失败（网络请求失败、服务端异常等情况）的数据回滚

class="filter-tree"

style="overflow:auto;"

:data="treeData"

:filter-node-method="filterNode"

@node-click="handleNodeClick"

ref="tree"

node-key="value"

:expand-on-click-node="false"

:render-content="renderContent"

default-expand-all>

class="filter-tree"

style="overflow:auto;"

:data="treeData"

:filter-node-method="filterNode"

@node-click="handleNodeClick"

ref="tree"

node-key="value"

:expand-on-click-node="false"

:render-content="renderContent"

default-expand-all>

//子节点模板

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中的参数进行回滚，该节点的编辑保存操作将无效

源码demo：calebman/vue-DBM

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。