vue el-table右键出现操作按钮

表格代码

<el-table
            v-loading="loading"
            v-adaptive
            :data="qcvisitList"
            :height="100"
            highlight-current-row
            style="width: 100%;margin-top: 10px;"
            @row-click="clickRow"
            @row-contextmenu="rightClick"
          >

            <el-table-column
              label="姓名"
              align="left"
              prop="name"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="年龄"
              align="left"
              prop="ageYear"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="性别"
              align="left"
              prop="sex"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{ scope.row.sex | dictF('sexType') }}
              </template>
            </el-table-column>
            <el-table-column
              label="身份证号"
              align="left"
              width="130px"
              prop="idCard"
              :show-overflow-tooltip="true"
            />
          </el-table>

重点是加入@row-contextmenu=“rightClick”

自己写一个右键菜单的div:

 <!-- 右键菜单 -->
        <div id="menu" class="menuDiv" v-show="menuShow">
          <ul class="menuUl">
            <li
              v-for="(item, index) in menus"
              :key="index"
              @click.stop="infoClick(index)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>

"menuDiv"用于定义div样式，“menuUl”为菜单选择项 ，“menuShow”控制显示隐藏，@click.stop="infoClick(index)"为点击菜单方法

定义变量:

data() {
    return {
      //菜单显隐
      menuShow: false,
      //就诊信息
      qcvisitRow: {},
      //右键菜单
      menus: [
        { name: '完成就诊', operType: 1 },
      ],
     }
   }

methods方法实现:

 //单击页面空白处隐藏完成就诊
    HiddenClick(){
      this.menuShow=false
    },
    rightClick(row, column, event) {
      this.menuShow=true
      this.qcvisitRow=row
      let menu = document.querySelector("#menu");
      //阻止元素发生默认的行为
      event.preventDefault();
      // 根据事件对象中鼠标点击的位置，进行定位
      // menu.style.left = event.clientX - 177 + "px";
      menu.style.left = 281 + "px";
      menu.style.top = event.clientY - 100 + "px";
      // 改变自定义菜单的隐藏与显示
      menu.style.display = "block";
      menu.style.zIndex = 1000;
    },
    //完成就诊
    infoClick(index) {
      if (index === 0) {
        var data=this.qcvisitRow
        data.auditState='1'
        updateVisit(data).then(res=>{
          if(res){
            this.getList()
          }
        })
      }
      let menu = document.querySelector("#menu");
      this.menuShow=false
    },

css样式:

<style lang="scss" scoped>
.menuDiv {
  display: flex;
  position: absolute;
  width: 87px;

  .menuUl {
    height: auto;
    width: auto;
    font-size: 14px;
    text-align: left;
    border-radius: 3px;
    border: none;
    background-color: #c4c4c4;
    color: #fff;
    list-style: none;
    padding: 0 10px;

    li {
      width: 87px;
      height: 35px;
      line-height: 35px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.47);

      &:hover {
        // background-color: rgb(26, 117, 158);
        color: rgb(54, 138, 175);
      }
    }
  }
}
</style>

需要注意的是要在页面点击事件上加上单击隐藏方法

mounted () {
    document.addEventListener('click', this.HiddenClick)
  },

最终效果：在行上右键出现完成就诊按钮