vue+element table表格鼠标右键点击弹出菜单

效果

一、在table表格添加右键事件

@row-contextmenu="handleRowContextmenu"

二、弹出内容设置公共方法

 <!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div
      class="contextmenu__item"
      v-for="(item, index) in menuList"
      :key="index"
      @click="handleMenu(item)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      menuList: [
        { title: "菜单一", value: 0, command: "first" },
        { title: "菜单二", value: 1, command: "second" },
        { title: "菜单三", value: 2, command: "third" },
        { title: "菜单四", value: 3, command: "fourth" },
      ],
    };
  },
  methods: {
    init(row, column, event) {
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector("#contextmenu");
      let cha = document.body.clientHeight - event.clientY;
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 150) {
        menu.style.top = event.clientY - 120 + "px";
      } else {
        menu.style.top = event.clientY - 10 + "px";
      }
      menu.style.left = event.clientX - 200 + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
    },
    foo() {
      this.$emit("foo");
    },
    handleMenu(item) {
      this.$emit("handleMenu", item);
    },
  },
};
</script>

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

三、引用公共方法 

<template>
  <div class="app-container">
    <context-button
      v-if="menuVisible"
      @foo="foo"
      ref="contextbutton"
      @handleMenu="handleMenu"
    ></context-button>
  </div>
</template>

<script>
import contextButton from "./components/ContextButton/index";

export default {
  name: "Screen",
  components: { contextButton},
  data() {
    return {
      selArr: [], // 多选选中的数据的数组集合
      menuVisible: false,
      dialogMonitorVisible: false,
      detailData: {}, // 详情数据
    };
  },
  methods: {
    // 变色样式监听
    tableRowClassName({ row, rowIndex }) {
      let color = "";
      for (let item of this.selArr.values()) {
        if (item.id === row.id) color = "table-SelectedRow-bgcolor";
      }
      return color;
    },
    handleRowContextmenu(row, column, event) {
      //点击鼠标右键触发
      this.selArr = [];
      this.detailData = row;
      this.$refs.elTable.clearSelection();
      this.$refs.elTable.setCurrentRow();
      this.menuVisible = false;
      this.menuVisible = true;
      this.selArr.push(row);
      this.$refs.elTable.toggleRowSelection(row, true);
      // 阻止右键默认行为
      event.preventDefault();
      this.$nextTick(() => {
        this.$refs.contextbutton.init(row, column, event);
      });
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo);
    },
    handleMenu(item) {
      //快速选择菜单
      const value = item.value;
      const command = item.command;
      //点击菜单内容触发操作
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ {
  .table-SelectedRow-bgcolor {
    td {
      background-color: #e8f4ff !important;
    }
  }
}
</style>