关于前端表格自定义右键菜单（适用所有表格）

需求：表格需要右键自定义菜单，菜单内包含功能为-->表格以当前右键行向上/下添加一行，删除当前行（使用框架：vue2）

以下代码包含html+css+js部分：

表格没放出来需要自己写

<template>
 <div>
  <div class="mycustomerbox">
    <div class="right-click-div" v-show="isShow">
      <p class="right-click-div-p" @click="clickP('up')">上方插入行</p>
      <p class="right-click-div-p" @click="clickP('donw')">下方插入行</p>
      <p class="right-click-div-p" @click="clickP('del')">删除该行</p>
    </div>
  </div>
 </div>
</template>

<style scoped>
.right-click-div {
  position: fixed;
  width: 100px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 2px 2px 6px 2px #00000028;
  top: 0;
  left: 0;
  z-index: 9999;
}
.right-click-div-p {
  font-size: 1.1em;
  cursor: pointer;
  padding: 6px;
  user-select: none;
}
.right-click-div-p:hover {
  background-color: #c8c8c9;
}
</style>

data() {
    return {
      isShow: false, //是否展示
      rightIndex: -1, //右键时所处的行
      tableData: [{ a1: "a1" }, { a2: "a2" }, { a3: "a3" }]
    };
  },

mounted() {
    window.addEventListener("mousedown", this.handleMousedown); //监听鼠标按下
  },

handleMousedown(e) {
      // console.log("查看右键的行", e);
      //监听鼠标按下
      if (
        // 上级元素中含有tbody表示是行内操作
        e.path.some((i) => {
          return i.nodeName === "TBODY";
        })
      ) {
        if (e.button == 2) {
          document.oncontextmenu = () => {
            // 鼠标右键默认菜单事件
            return false;
          };
          //表格中右键才会出现自定义菜单栏
          let div = document.querySelector(".right-click-div"); //获取自定义菜单栏盒子，根据鼠标设置位置
          div.style.top = e.clientY + 1 + "px";
          div.style.left = e.clientX + 1 + "px";
          this.isShow = true;
          // 寻找表格内右键的TR标签，根据TR标签查询当前TR属于第几行
          this.rightIndex =
            e.path.find((i) => {
              return i.nodeName == "TR";
            }).rowIndex || -1;
        } else {
          this.rightIndex = -1;
          this.isShow = false;
          document.oncontextmenu = () => {
            return true;
          };
        }
      } else {
        if (this.isShow) {
          //结合上文，这里表示点击操作不在表格tbody中并且点击的也不是自定义菜单
          if (
            e.path.findIndex((i) => {
              return i.className === "right-click-div-p";
            }) === -1
          ) {
            this.isShow = false;
            document.oncontextmenu = () => {
              return true;
            };
          }
          // 不能在这里就直接隐藏菜单，不然触发不了菜单左键事件
          // this.isShow = false;
        } else {
          this.rightIndex = -1;
          document.oncontextmenu = () => {
            return true;
          };
        }
      }
      // if (e.button == 0) {
      //   console.log('鼠标左键点击')
      // }
      // if (e.button == 1) {
      //   console.log("鼠标滚动键点击");
      // }
      // if (e.button == 2) {
      //   console.log("鼠标右键点击");
      // }
    },
    clickP(value) {
      console.log("查看右键类型", value);
      switch (value) {
        case "up":
          // 向上添加一行
          this.tableData.splice(
            this.rightIndex === 0 ? 0 : this.rightIndex - 1,
            0,
            this.tableData[0]
          );
          break;
        case "donw":
          // 向下添加一行
          this.tableData.splice(
            this.rightIndex === this.tableData.length
              ? this.tableData.length
              : this.rightIndex + 1,
            0,
            this.tableData[0]
          );
          break;
        case "del":
          // 删除该行
          this.tableData.splice(this.rightIndex,1)
          break;
        default:
          break;
      }
      this.rightIndex = -1;
      this.isShow = false;
    }