ant Design Vue 表格右鍵

1,在表格外面添加menu組件

<a-menu class="menustyle" :style="menuStyle" v-if="menuVisible">
      <a-menu-item>
        <a @click="lookBuilding(recordRow)">查看</a>
      </a-menu-item>
      <a-menu-item>
        <a @click="BuildingDelete(recordRow)" class="red">刪除</a>
      </a-menu-item>
    </a-menu>

2,在data中添加如下代碼

menuVisible: false,
      menuStyle: {
        position: "absolute",
        top: "0",
        left: "0",
        zIndex: 1,
        borderRadius: "5px",
        border: "1px solid #eee"
      },
      recordRow: [],
      customClick: record => ({
        on: {
          contextmenu: e => {
            e.preventDefault();
            this.menuVisible = true;
            this.recordRow = record;
            this.menuStyle.top = e.clientY + "px";
            this.menuStyle.left = e.clientX + "px";
            document.addEventListener("click", this.cancelClick);
          }
        }
      })

3,在methods中添加如下方法:

//取消右鍵菜單
    cancelClick() {
      this.menuVisible = false;
      document.body.removeEventListener("click", this.cancelClick);
    },

4,完成: