之前网上荡了一遍，并没有找到什么好例子，索性自己写个吧。。
代码在github上，https://github.com/chengheai/element-tree 欢迎star，follow，谢谢！
个人博客 ：https://chengheai.github.io/ 欢迎交流
其实很简单的了，还是把代码分享一下吧；
template
<el-aside style="padding-top:10px">
<el-tree
:data="setTree"
:props="defaultProps"
node-key="id"
ref="SlotMenuList"
:filter-node-method="filterNode"
@node-contextmenu='rihgtClick'
accordion
>
<span class="slot-t-node" slot-scope="{ node, data }">
<span v-show="!node.isEdit">
<span v-show="data.children && data.children.length >= 1">
<i :class="{ 'fa fa-plus-square': !node.expanded, 'fa fa-minus-square':node.expanded}" />
<span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>
</span>
<span v-show="!data.children || data.children.length == 0">
<i class='' style='margin-right:10px'></i>
<span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>
</span>
</span>
<!-- 编辑输入框 -->
<span v-show="node.isEdit">
<el-input class="slot-t-input" size="mini" autofocus
v-model="data.name"
:ref="'slotTreeInput'+data.id"
@blur.stop="NodeBlur(node, data)"
@keyup.enter.native="NodeBlur(node, data)"></el-input>
</span>
</span>
</el-tree>
<!--鼠标右键点击出现页面-->
<div v-show="menuVisible">
<el-menu
id = "rightClickMenu"
class="el-menu-vertical"
@select="handleRightSelect"
active-text-color="#fff"
text-color="#fff">
<el-menu-item index="1" class="menuItem">
<span slot="title">添加分类</span>
</el-menu-item>
<el-menu-item index="2" class="menuItem">
<span slot="title">修改分类</span>
</el-menu-item>
<el-menu-item index="3" class="menuItem">
<span slot="title">删除分类</span>
</el-menu-item>
<hr style="color: #ffffff">
<el-menu-item index="4" class="menuItem">
<span slot="title">添加标签</span>
</el-menu-item>
</el-menu>
</div>
</el-aside>
script
handleRightSelect1(key) {
console.log(key);
if (key == 1) {
this.NodeAdd(this.NODE, this.DATA);
this.menuVisible2 = false;
} else if (key == 2) {
this.NodeEdit(this.NODE, this.DATA);
this.menuVisible2 = false;
} else if (key == 3) {
this.NodeDel(this.NODE, this.DATA);
this.menuVisible2 = false;
} else if(key == 4){
console.log('4')
}
},
// handleAddTop(){//添加顶级节点
// this.setTree.push({
// id: ++this.maxexpandId,
// name: '新增顶级节点',
// pid: '',
// children: []
// })
// },
NodeBlur(n, d){//输入框失焦
console.log(n, d)
if(n.isEdit){
this.$set(n, 'isEdit', false)
}
this.$nextTick(() => {
this.$refs['slotTreeInput'+d.id].$refs.input.focus()
})
},
NodeEdit(n, d){//编辑节点
console.log(n, d)
if(!n.isEdit){//检测isEdit是否存在or是否为false
this.$set(n, 'isEdit', true)
}
},
NodeDel(n, d){//删除节点
console.log(n, d)
let that = this;
if(d.children && d.children.length !== 0){
this.$message.error("此节点有子级，不可删除！")
return false;
}else{
//新增节点可直接删除，已存在的节点要二次确认
//删除操作
let DelFun = () => {
let _list = n.parent.data.children || n.parent.data;//节点同级数据
let _index = _list.map((c) => c.id).indexOf(d.id);
console.log(_index)
_list.splice(_index, 1);
this.$message.success("删除成功！")
}
//二次确认
let ConfirmFun = () => {
this.$confirm("是否删除此节点？","提示",{
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
DelFun()
}).catch(() => {})
}
//判断是否是新增节点
d.id > this.non_maxexpandId ? DelFun() : ConfirmFun()
}
},
NodeAdd(n, d){//新增节点
console.log(n, d)
//判断层级
if(n.level >= 3){
this.$message.error("最多只支持三级！")
return false;
}
//新增数据
d.children.push({
id: ++this.maxexpandId,
name: '新增节点',
pid: d.id,
children: []
})
//同时展开节点
if(!n.expanded){
n.expanded = true
}
},
rihgtClick(event, object, value, element) {
if (this.objectID !== object.id) {
this.objectID = object.id;
this.menuVisible = true;
this.DATA = object;
this.NODE = value;
} else {
this.menuVisible = !this.menuVisible;
}
document.addEventListener('click',(e)=>{
this.menuVisible = false;
})
let menu = document.querySelector("#rightClickMenu");
/* 菜单定位基于鼠标点击位置 */
menu.style.left = event.clientX + 20 + "px";
menu.style.top = event.clientY - 30 + "px";
menu.style.position = "absolute"; // 为新创建的DIV指定绝对定位
menu.style.width = 160 + "px";
/*console.log("右键被点击的左侧:",menu.style.left);
console.log("右键被点击的顶部:",menu.style.top);*/
// console.log("右键被点击的event:",event);
// console.log("右键被点击的object:", object);
// console.log("右键被点击的value:", value);
// console.log("右键被点击的element:", element);
},
完整代码请转到https://github.com/chengheai/element-tree
