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

这篇文章主要介绍“vue在table表中怎么悬浮显示数据及右键菜单”，在日常操作中，相信很多人在vue在table表中怎么悬浮显示数据及右键菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue在table表中怎么悬浮显示数据及右键菜单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

悬浮显示

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

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

直接看代码

//列名及属性名<el-table-column prop="member"  label="构件名称">//从json数据调取    <template slot-scope="scope">    //悬浮显示数据    <el-popover trigger="hover" placement="top" >      <p>构建描述: {{ scope.row.memberTxt }}</p>      <p>创建时间: {{ scope.row.date2 }}</p>      <div slot="reference" class="name-wrapper">      //行显示数据        <el-tag size="medium" >     {{ scope.row.member }}     //数据后加删除按钮     <el-button icon="el-icon-delete" type="text" class="red" @click="handleDelete(scope.$index,scope.row)">     </el-button>     </el-tag>      </div>    </el-popover>    </template></el-table-column>

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

右键菜单

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

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

<el-table :data="tableData"   type="expand"   class="table"    ref="multipleTable"    header-cell-class-name="table-header"   @row-contextmenu="rowContextmenu"//主要就是这个事件   @selection-change="handleSelectionChange">

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

<context-button v-if="menuVisible" @foo="foo" ref="contextbutton"     @handleOne="handleOne" @handleTwo="handleTwo" @handleThree="handleThree"     @handleFour="handleFour" @handleFive="handleFive"></context-button>

这些@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                     },           handleTwo () {                },        handleThree () {                },  handleFour (){           },  handleFive (row){    }

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

<template>  <div id="contextmenu" class="contextmenu">    <div class="contextmenu__item" @click="handleTwo()">设计信息</div>    <div class="contextmenu__item" @click="handleThree()">查看图纸</div>  <div class="contextmenu__item" @click="handleFour()">查看模型</div>   <div class="contextmenu__item" @click="handleFive()">修改信息</div>  </div></template>

然后就是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;  }

到此，关于“vue在table表中怎么悬浮显示数据及右键菜单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！