vue如何在表格中實現(xiàn)右鍵菜單

更新時間：2024年04月26日 09:07:05 作者：球球和皮皮

這篇文章主要介紹了vue如何在表格中實現(xiàn)右鍵菜單問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

最近公司的管理系統(tǒng)又要添加新功能，需求是為表格數(shù)據(jù)添加右鍵菜單，操作當前選中行的屬性。

剛開始想的是直接控制DOM樹生成一個HTML編寫的菜單，掛載到右鍵點擊的位置。

但是我覺得vue這么強大，肯定有右鍵組件，肯定比自己寫的好看。

不查不知道，一查居然發(fā)現(xiàn)vue原生支持右鍵菜單，當機立斷，用原生右鍵菜單。

安裝

npm install vue-contextmenujs

一、實現(xiàn)效果

老規(guī)矩，先來個成果圖，有需要再往下看。

二、使用步驟

1、表格實現(xiàn)

我的表格用的是avue-crud，暫時不詳細介紹這個表格組件了，總之就是功能很強大，比el-table強大的多。

下邊的屬性介紹一下：

page：表格的頁碼顯示，包括currentPage、pageSize、total等等。
data：表格數(shù)據(jù)
option：表格屬性配置
v-loading：加載動畫
@row-contextmenu：對表格數(shù)據(jù)的右鍵操作
@size-change：對每頁展示多少條數(shù)據(jù)的改變操作
@current-change：翻頁操作
@select：選中操作
@select-all：全選操作

<avue-crud
   ref="crud"
   :page.sync="detailPage"
   :data="tableData"
   :option="tableOption"
   v-loading="loading"
   @row-contextmenu="handleContextMenu"
   @size-change="sizeChange"
   @current-change="currentChange"
   @select="handleSelect"
   @select-all="handleSelectAll">
 </avue-crud>

這些操作可以參考avue官網(wǎng)，具體怎么設(shè)置先不細說了，主要介紹右鍵菜單。

和右鍵菜單對應(yīng)的就是@row-contextmenu方法，監(jiān)聽了對表格數(shù)據(jù)的右鍵點擊事件。

我們在這個方法里綁定生成菜單的函數(shù)，我這里起的名字是handleContextMenu

2、生成右鍵菜單

表格做好了，右擊事件也綁定好了，接下來就是生成右鍵菜單。

handleContextMenu(item, index) {
      this.$contextmenu.destroy();
      this.$contextmenu({
        items: [
          {
            label: "屬性",
            onClick: () => {
              // 記錄當前右鍵操作
              store.commit("SET_RIGHT_TYPE", "viewResourceNature");
              this.$refs.attrBox.visible = true;
            },
          },
          {
            label: "標簽設(shè)置",
            icon: "el-icon-discount",
            disabled: !(current.Editable),
            onClick: () => {
              // 記錄當前右鍵操作
              store.commit("SET_RIGHT_TYPE", "setPictureTag");
              this.setTag(item);
            },
          },
          {
            label: "電子圖冊",
            divided: true,
            onClick: () => {
              // 記錄當前右鍵操作
              store.commit("SET_RIGHT_TYPE", "electronicAtlas");
              this.$refs.electronicBox.visible = true;
            },
            children: [
              {
                label: "截取可視化區(qū)域",
                onClick: () => {
                  this.message = "截取可視化區(qū)域";
                }
              },
              { label: "截取全屏" }
            ]
          },
          {
            label: "渠道名稱設(shè)置",
            onClick: () => {
              // 記錄當前右鍵操作
              store.commit("SET_RIGHT_TYPE", "abilityNames");
              this.$refs.abnBox.visible = true;
            },
          }
        ],
        event,
        customClass: "resource-context-menu",
        zIndex: 999,
        minWidth: 200,
      });
      return false;
    }

生成右鍵菜單要調(diào)用this.$contextmenu()方法。參數(shù)是一個對象：基本包含以下屬性：

{
	// 菜單內(nèi)容
	item：[],
	// 自定義樣式
    customClass: "resource-context-menu",
    // 層級
    zIndex: 999,
    // 最小寬度
    minWidth: 200,
}

從我的例子也能看出來，最重要的是item屬性，配置的是右鍵菜單中的每一項。

item中可以設(shè)置：

菜單名稱：label：“菜單名稱”
菜單前置圖標：icon：“el-icon-discount”
菜單底部分割線：divided：true
菜單點擊事件：onClick: () => {}
子菜單：children：[]

每次生成新的右鍵菜單前，先把舊的銷毀。

this.$contextmenu.destroy();

3、監(jiān)聽鼠標滾動事件，清除右鍵菜單

突然發(fā)現(xiàn)有這么個問題：當列表數(shù)據(jù)過多時，我們需要滾動表格去查看下面的數(shù)據(jù)，這時候右鍵菜單的位置就和表格的數(shù)據(jù)對不上了。

這時候需要加個鼠標滾動事件的監(jiān)聽，當鼠標滾輪事件發(fā)生時，清除右鍵菜單。

代碼實現(xiàn)如下：

mounted() {
	// 先把瀏覽器自帶的右鍵功能屏蔽掉
   this.$nextTick(() => {
     // 禁止右鍵
     document.oncontextmenu = new Function("event.returnValue=false");
   });
   // 監(jiān)聽頁面滾動事件
   window.addEventListener('scroll', this.handleScroll, true)
 },
beforeDestroy() {
  // 離開頁面時，清除頁面滾動事件
  window.removeEventListener('scroll', this.handleScroll, true)
  this.$nextTick(() => {
    // 放開對瀏覽器右鍵的禁止
    document.oncontextmenu = new Function();
  });
},
methods: {
	// 頁面滾動時清除右鍵菜單，避免位置混淆
    handleScroll () {
      this.$contextmenu.destroy();
    }
}