elementui tree鼠标右击显示menu
最近的项目做权限管理涉及到比较多树形结构,在这里分享一种鼠标右击树节点显示菜单的方法,效果图如下。(网上看了很多其他方法,感觉太繁琐,或者说不适合自己的项目)
1、tree鼠标右击方法
官方文档给出了鼠标右击的方法,直接拿来用就是了, @node-contextmenu=“rightClick”。
2、tree懒加载
menu是用的 scoped slot来实现的,传入了node和data。为了方便menu定位,首先给树节点加上了相对定位,给menu加绝对定位,menu的样式大家随意发挥了,menu的click事件要阻止冒泡 @click.stop,不然点击menu你只能看树在做伸展运动!。
html代码
<el-tree
style="position:relative"
ref="tree"
node-key="gndm"
:default-expanded-keys="['1']"
:props="defaultProps"
lazy
:load="loadNode"
show-checkbox
@node-click="handleNodeClick"
@check-change="handleCheckChange"
@node-contextmenu="rightClick"
>
<span class="custom-tree-node" slot-scope="{node, data}">
<span>{{node.label}}</span><!--显示节点名称-->
<!-- 树节点menu -->
<div v-show="data.showMenuFlag" class="tree-menu">
<span class="tree-btn" >增加</span>
<span class="tree-btn" >增加子节点</span>
<span class="tree-btn" >插入</span>
<span class="tree-btn" @click.prevent="removeNode(node,data)">删除</span>
</div>
</span>
</el-tree>
树的加载直接看代码吧,写的比较繁琐,因为没有控制显示menu的flag,循环了一遍子节点,加上flag,略有影响性能,子节点不是很多可以忽略,(request是封装的axios方法,且采用了代理地址)
loadNode(node, resolve) {
if (node.level === 0) {
//request是封装的axios
request.post("/glyygn/inittree", {}).then(res => {
if (res.data.head.errorCode === 0) {
console.log("初始化功能树", res.data.body);
return resolve(res.data.body);//初始化根节点
}
});
} else {
//根据节点key请求子节点
let par = {
sjgnDm: node.key
};
request.post("/glyygn/getchildnode", par).then(res => {
if (res.data.head.errorCode === 0) {
console.log("查询下一级功能树", res.data.body);
//循环加flag
res.data.body.forEach(ele => {
ele.showMenuFlag = false;
});
resolve(res.data.body);
} else {
errorNotice(res.data.head.errorMsg);//封装的报错
}
});
}
}
3、鼠标右击事件
鼠标右击主要有两点,第一个是要把上次右击的data暂存起来,以便右击另一个节点的时候取消上次的右击menu,不然会出现n个menu;第二个是要加一个事件监听,以便点击其他地方时取消menu,直接看代码吧。
rightClick(event, data, node, self) {
this.temData.showMenuFlag = false;//将上次保存的节点数据的showMenuFlag设false,取消上次右击菜单
data.showMenuFlag = true;//显示菜单
document.addEventListener("click", this.listenEvent);//增加事件监听,以便点击其他地方取消右击菜单
this.temData = data;//把该节点的数据暂存起来
},
listenEvent() {
this.predata.showMenuFlag = false;
document.removeEventListener("click", this.listenEvent);
}
大概就这么多吧,不知道有没有漏,本人也是小白,这个是自己摸索的方法,有更好方法的小伙伴或者有不懂的发邮件吧!附上邮箱young0053@163.com