elementui表格单选按钮,elementui左侧菜单
本文主要介绍了元素表格组件实现右键菜单的功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
前言实现思路最后
前言
最近产品给我提了个需求————想要实现用户右键桌子的某一行时，显示该行操作栏的功能。觉得这个需求挺有意思的，特此分享给大家。
技术栈：elementUI
实现思路
要实现右键菜单我们需要定义一个菜单栏组件当用户点击桌子的某一行时，我们处理好显示位置再将菜单栏渲染到桌子上。先实现这个右键菜单组件：
//右键菜单。某视频剪辑软件
模板
div id=右键菜单 class=右键菜单
div class= right keymenuitem @ click= $ emit( edit )编辑/div
div class= right keymenuitem @ click= $ emit( del )删除/div
/div
/模板
脚本
//.忽略
方法：{
加载(行、列、事件){
//调整菜单出现的位置
让菜单=文档。查询选择器(#右键菜单)
高度=文档之间的字母。身体。客户身高-事件。客户
如果（身高150之间){
菜单。风格。top=事件。客户-80 像素
}否则{
菜单。风格。top=事件。客户-30 像素
}
菜单。风格。左=事件。clientx 20 像素
//监听数字正射影像图的点击事件
文档。addevent侦听器( click ，this .$emit(右键单击))
}
}
/脚本
风格。右键菜单{
显示：块；
行高：34px
文本对齐：居中；
}。右键菜单：not(:last-child) {
border-bottom: 1px solid rgba(0，0，0，0.1)；
}。右键菜单{
位置：绝对；
背景色：# fff
宽度：100像素
字体大小：12px
颜色：# 444040;
边框-半径：4px
-WebKit-box-sizing:border-box；
框大小：边框-框；
边框半径：3px
边框：1px实心rgba(0，0，0，0.15)；
box-shadow: 0 6px 12px rgba(0，0，0，0.175)；
空白：nowrap
z指数：1000;
}。rightKeyMenuItem:hover {
光标：指针；
背景：# 66 B1 ff
边框颜色：# 66 B1 ff
颜色：# fff
}
/风格
使用右键单击组件。我们需要监听用户右键点击桌子行的操作，这个功能在元素表中已经有相应的方法了：
行-上下文菜单当某一行被鼠标右键点击时会触发该事件（行、列、事件)
触发这个方法然后将参数都传递过去。修改可见性的值将菜单栏组件显现出来。
在菜单栏组件中我们通过获取到当前点击时浏览器Y轴位置将菜单的高度进行合适修改。这样当我们点击不同桌子行菜单。的位置也会随着鼠标点击时距离浏览器Y轴的位置相应的进行变化。
//商务表
模板
差异
埃尔表
:data=tableData
@ row-context menu= rowContextmenu
边界
//.忽略
/el-table
右键菜单v-if=visable
@右键单击=右键单击
ref=菜单
@edit=handleEdit
@del=handleDel
/右键菜单
/div
/模板
从" @ component/右键菜单/索引"导入右键菜单
导出默认值{
组件：{
右键菜单
},
方法：{
rowContextmenu(行、列、事件){
//如果之前已经打开了先关闭一下。
this.visable=false
setTimeout(()={
this.visable=true
},300)
//阻止右键默认行为
事件。预防默认()
这个. nextTick(()={
这个. refs.menu.onload(行、列、事件)
})
},
右键单击(){
this.visable=false
//取消鼠标监听事件菜单栏
文档。removeeventlistener( click ，this.rightClick)
},
handleEdit () {
//.做某事
},
handleDel () {
//.做某事
}
}
}
有时列表的操作项不仅限于修改和删除。所以我们可以使用插槽来定制需要显示的内容。
模板
div id=右键菜单 class=右键菜单
class= right keymenuitem @ click= $ emit( edit ) edit/div
class= right keymenuitem @ click= $ emit( del ) delete/div
div class= rightKeyMenuItem slot name= more /slot/div
/div
/模板
目前为止。元素右键菜单的功能就完成了。实现这个要求最重要的一点就是计算右键菜单的显示位置。因为不同的页面有不同的表位置，所以rightKeyClick组件还需要传递几个参数来进行优化和调整。这里就不赘述了。你可以自己试试。
最后
关于元素表组件的右键菜单功能的文章到此结束。有关元素表右键菜单的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。