这期内容当中小编将会给大家带来有关怎么在vue中使用Element构建一个自定义树,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
控件使用
概要
基于element-ui树形控件的二次封装
提供编辑、删除节点的接口
提供一个next钩子,在业务处理失败时可使用next(false)回滚操作
控件源码见 github
文档
props
属性 | 说明 | 类型 |
---|---|---|
value | 源数据,可使用v-model双向绑定 | Array |
events
事件名 | 说明 | 参数 |
---|---|---|
SaveEdit | 点击编辑或者添加树节点后的保存事件 | (父节点数据、当前节点数据、next) |
DelNode | 删除节点事件 | (父节点数据、当前节点数据、next) |
NodeClick | 节点点击事件 | (当前节点数据) |
源数据描述
属性 | 说明 |
---|---|
value | 树节点的唯一标识 |
label | 树节点的显示名称 |
status | (1:编辑状态)(0:显示状态)(-1不可编辑状态) |
children | 子节点数据 |
调用示例
<m-tree
v-model="tableTree"
@SaveEdit="SaveEdit"
@DelNode="DelNode"
@NodeClick="handleNodeClick"></m-tree>
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)
}
})
}
实现方式
构建子节点的模板
<span class="span_item">
<span @click="Expanded">
<Input v-if="node.status == 1" v-model="node.label" size="small" ></Input>
<Icon v-if="node.status == 0" type="asterisk"></Icon>
<Icon v-if="node.status == -1" type="ios-keypad-outline"></Icon>
<span v-if="node.status != 1">{{node.label}}</span>
</span>
<span v-if="node.status == 1">
<Button size="small" type="success" icon="checkmark-circled" @click="SaveEdit">确认</Button>
<Button size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
</span>
<span class="span_icon">
<Icon v-if="node.status == 0" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
<Icon v-if="node.status == 0" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
<Icon v-if="node.status == 0&&node.children.length < 1" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
</span>
</span>
子节点通过$emit通知父节点事件
SaveEdit(){
//保存节点事件
this.$emit('SaveEdit',this.nodeData)
},
父节点核心实现,使用renderContent函数加载子节点模板,点击保存节点时将业务参数保存在runParam中用于在业务操作失败(网络请求失败、服务端异常等情况)的数据回滚
<el-tree
class="filter-tree"
: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>
</el-tree>
//子节点模板
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)
}
}
})
}
上述就是小编为大家分享的怎么在vue中使用Element构建一个自定义树了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。