珠江的长度,星剧社鹿鼎记,夏家三千金全集下载
说明
做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看element的组件说明时发现它的可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。
控件演示
github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！
控件使用
概要
文档
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" style="width: 100px;" 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 style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled" @click="saveedit">确认</button>
<button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled" @click="canceledit">取消</button>
</span>
<span class="span_icon">
<icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16" @click.native="openedit"></icon>
<icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16" @click.native="append"></icon>
<icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" 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"
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>
</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)
}
}
})
}
操作结果钩子，如果next函数传入false则判定操作失败，使用runparam中的参数进行回滚，该节点的编辑保存操作将无效
源码demo：calebman/vue-dbm
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论