vue在table表中悬浮显示数据及右键菜单 vue在table表中悬浮显示数据及右

本文实例为大家分享了vue在table表中悬浮显示数据及右键菜单的具体代码，供大家参考，具体内容如下
悬浮显示这个文档里是存在的，但很容易被忽略，先看看效果图

文章图片

鼠标放在哪行，就会弹出相对应的描述。
直接看代码

//列名及属性名//从json数据调取

只是这些就足够了，表的设置无需做更改，用到右键菜单时才会更改；
右键菜单这与上个可以没有关系，也可是同一个，取决于自己！
依旧是先看图

文章图片

右下角的菜单就是右键的菜单了；
我们来看具体实现：
首先就是表格的设置
文档中表格有这个事件，

当然，在表格下面，还要写重要的一步

这些@handle对应点击事件
接下来就是methods

rowContextmenu (row, column, event) {this.menuVisible = falsethis.menuVisible = true// 阻止右键默认行为event.preventDefault()this.$nextTick(() => {this.$refs.contextbutton.init(row,column,event)this.updForm = row; })},foo() { // 取消鼠标监听事件菜单栏this.menuVisible = false/* document.removeEventListener('click', this.foo) */},handleTwo () {},handleThree () {},handleFour (){},handleFive (row){}

那些handle开头的方法是右键菜单的方法，我自己写的就不公布了，知道是点击按钮事件就可以了
重点，上面我们在表格下面写了神秘代码就要用到了
在你使用的vue界面的目录下创建一个“contextButton”文件夹，对应上面的ref即可，注意大小写！
在文件夹下创建vue页面
首先是html，也就是右键菜单显示的内容了

然后就是script

export default {name: "index",data () {return {collapse: false,}},methods: {init (row, column,event) {let menu = document.querySelector('#contextmenu')let cha = document.body.clientHeight - event.clientYconsole.log(document.body.clientHeight,event.clientY,cha)if (cha < 150) {menu.style.top = event.clientY -0 + 'px'} else {menu.style.top = event.clientY -60 + 'px'}menu.style.left = event.clientX - 200 + 'px'document.addEventListener('click', this.foo)},foo () {this.$emit('foo')},handleTwo () {this.$emit('handleTwo')},handleThree () {this.$emit('handleThree')},handleFour (){this.$emit('handleFour')},handleFive (row){this.$emit('handleFive')}}}

位置的话是随着你右键的不同位置二不同的
如果不喜欢这个位置，可以自己改变
最后就是样式了

.contextmenu__item {display: block; line-height: 34px; text-align: center; }.contextmenu__item:not(:last-child) {border-bottom: 1px solid rgba(64,158,255,.2); }.contextmenu {position: absolute; background-color: #ecf5ff; width: 100px; font-size: 12px; color: #409EFF; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(64,158,255,.2); white-space: nowrap; z-index: 1000; }.contextmenu__item:hover {cursor: pointer; background: #66b1ff; border-color: #66b1ff; color: #fff; }

颜色什么的都是我喜欢的，不喜欢的话可以自己改变。
【vue在table表中悬浮显示数据及右键菜单】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。