elementui右鍵菜單實現

el-table添加@row-contextmenu="rightClick"

// table的右鍵點擊當前行事件
    rightClick(row, column, event) {
      // 阻止瀏覽器右鍵默認
      event.preventDefault();
      // 當前行在編輯狀態時 或者 有正在編輯的行
      if (!(this.currentRow.showRow || row.showRow) && row.patrolStatus === '未進行') {
        this.foo();
        // 定義變量接收該節點所對應的對象
        this.currentRow = row;
        this.menuVisible = true;
        // 獲取當前右鍵點擊table下標
        this.data.forEach((item, index) => {
          if (item.id === row.id) {
            this.currentRowIndex = index;
            return false;
          }
        });
        // 監聽事件鼠標點擊事件，若點擊則隱藏菜單
        document.addEventListener('click', this.foo);
        this.$refs.card.$el.style.left = `${event.clientX + 20}px`;
        this.$refs.card.$el.style.top = `${event.clientY - 100}px`;
        
      }
    },
    foo() {
      this.menuVisible = false;
      // 及時關掉監聽
      document.removeEventListener('click', this.foo);
    },

菜單樣式不管，使用el-card

<el-card class="box-card" ref="card" v-show="menuVisible" >
          <div class="edit" @click="edit()">
            編輯
          </div>
          <div class="delete" @click="remove()" >
            刪除
          </div>
        </el-card>

保存當前行數據，點擊調用card上的模擬菜單綁定的方法~注意間隙。