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

本文实例为大家分享了vue在table表中悬浮显示数据及右键菜单的具体代码，供大家参考，具体内容如下

悬浮显示

这个文档里是存在的，但很容易被忽略，先看看效果图

鼠标放在哪行，就会弹出相对应的描述。

直接看代码

//列名及属性名

//从json数据调取
    

只是这些就足够了，表的设置无需做更改，用到右键菜单时才会更改；

右键菜单

这与上个可以没有关系，也可是同一个，取决于自己！
依旧是先看图

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

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

这些@handle对应点击事件

接下来就是methods

rowContextmenu (row, column, event) {
            this.menuVisible = false
            this.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.clientY
          console.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;
  }

颜色什么的都是我喜欢的，不喜欢的话可以自己改变。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。