整理最近开发过程遇到的坑,还有一些自己想要记录分享的。大概包括Tree结构:右键菜单,节点的增删改和移动,还有记录一个多层数据嵌套数据,结构不渲染的问题;表格结构:表格的上下移动,修改,还有一些小知识点。本章主要记录tree节点 右键菜单的功能。
一、实现tree结构的右键
element中提供了现成的api,node-contextmenu.而且提供了四个参数。可以通过右键拿到data,node节点,event(判断位置),还有节点。
上代码
@node-contextmenu="rightClick"
rightClick(){
this.menu=true//让菜单显示
document.removeEventListener("click", this.Listen);//添加监听,监听鼠标事件
}
二、右键菜单的实现
第一种,你可以自己定义div,设计样式,规定大小。需要提醒的是,你需要设置自定义属性,原因是,判断你点击的菜单功能是什么。
第二种,利用element中的NavMenu组件,这样可以省去一些样式的设置,menu中index属性,也是作为判断菜单功能的依据,而且提供现成的api
<div v-show="menu">
<el-menu
id="menu"
@select="handleSelect"
text-color="#000"
>
<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>
</el-menu>
</div>
通过select事件,可以拿到你点击的菜单功能,进行相应的操作就ok了
handleSelect(key) {
if(key==1){
console.log('这是新建功能');
}else if(key==2){
console.log('这是修改功能');
}
}
对了 还有一个重要的点,就是对鼠标的监听事件,开始写的时候,因为没有写这个监听,老是踩坑,后来参考了网上大佬的的写法解决了。
需要监听你鼠标的事件,如果你点击别的地方,及时将菜单关闭
Listen() {
this.menu = false;
document.removeEventListener("click", this.Listen);
},
后记:下一篇具体写菜单操作,包括新建,修改,删除,上移,下移。