element table右键菜单

row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event

<template>
  <div id="app">
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @row-click="clickTableRow"
      @row-contextmenu="rightClick"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址"> </el-table-column>
    </el-table>
    <div id="menu">
      <ul>
        <li @click="infoClick"><span>菜单1</span></li>
        <li>
          <span >菜单2</span><i style="float: right;margin-top: 7px;font-size: 15px;" class="el-icon-arrow-right"/>
          <ul>
            <li><span>菜单1</span></li>
            <li><span>菜单2</span></li>
            <li><span>菜单3</span></li>
          </ul>
        </li>
        <li><span>菜单3</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      currentRowIndex: 0,
    };
  },
  methods: {
    // 自定义菜单的点击事件
    infoClick(index) {
      this.$alert(
        "当前table的下标为" + this.currentRowIndex,

        {
          confirmButtonText: "确定",
          callback: (action) => {
            var menu = document.querySelector("#menu");
            menu.style.display = "none";
          },
        }
      );
    },
    // table的左键点击当前行事件
    clickTableRow(row, column, event) {
      var menu = document.querySelector("#menu");
      menu.style.display = "none";
    },
    // 右键点击事件
    rightClick(row, column, event) {
      console.log(arguments);

      var menu = document.querySelector("#menu");
      event.preventDefault();
      //获取我们自定义的右键菜单

      // 根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = event.clientX + "px";
      menu.style.top = event.clientY + "px";
      // 改变自定义菜单的隐藏与显示
      menu.style.display = "block";
      console.log(row, column);
      // 获取当前右键点击table下标
      this.tableData.forEach((item, index) => {
        if (item.bugid === row.bugid) {
          //这里判断相等的条件可以自己改为该行数据的唯一键
          this.currentRowIndex = index;
          return false;
        }
      });
      this.setCurrent(row);
    },
    setCurrent(row) {
      console.log("高亮" + row);
      this.$refs.singleTable.setCurrentRow(row);
    },
  },
};
</script>

<style>
#menu {
  position: absolute;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #ffffff;
  cursor: pointer;
  color: #606266;
  width: 200px;
  border: 1px solid #e4e7ed;
  /* margin: 50px auto; */
  font-size: 13px;
}

#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#menu ul li {
  padding: 0px 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
  box-sizing: border-box;
  text-indent: 8px;
}
#menu ul li .iconfont {
  float: right;
}

#menu ul li ul {
  display: none;
  position: absolute;
  left: 200px;
  top: 0px;
  width: 200px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

#menu ul li ul li {
  background-color: #fff;
}

#menu ul li:hover {
  background-color: #ecf5ff;
}

#menu ul li:hover ul {
  display: block;
}
</style>