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;