element表格組件實現(xiàn)右鍵菜單的功能

更新時間：2022年03月23日 15:18:03 作者：李知恩

本文主要介紹了element表格組件實現(xiàn)右鍵菜單的功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

最近產(chǎn)品給我提了個需求 ————想要實現(xiàn)用戶右鍵table的某一行時，顯示該行操作欄的功能。覺得這個需求挺有意思的,特此分享給大家。

技術棧: elementUI

實現(xiàn)思路

要實現(xiàn)右鍵菜單我們需要定義一個菜單欄組件當用戶點擊table的某一行時，我們處理好顯示位置再將菜單欄渲染到table上。先實現(xiàn)這個rightKeyMenu組件:

// right-key-menu.vue 
<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">編輯</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">刪除</div>
  </div>
</template>
<script>
 //...忽略
  methods: {
        onload (row, column,event) {
           //調(diào)整菜單出現(xiàn)的位置
          let menu = document.querySelector('#right-key-menu')
          let betweenHeight = document.body.clientHeight - event.clientY
          if (betweenHeight < 150) {
            menu.style.top = event.clientY -80 + 'px'
          } else {
            menu.style.top = event.clientY -30 + 'px'
          }
          menu.style.left = event.clientX + 20 + 'px'
          // 監(jiān)聽dom的click事件
          document.addEventListener('click', this.$emit('rightClick')) 
       }
        }
  </script>      
<style>
.right-key-menu {
  display: block;
  line-height: 34px;
  text-align: center;
}
.right-key-menu:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.right-key-menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.rightKeyMenuItem:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>

使用rightKeyClick組件。我們需要監(jiān)聽用戶右鍵點擊table行的操作，這個功能在elementUI table中已經(jīng)有相應的方法了：

row-contextmenu 當某一行被鼠標右鍵點擊時會觸發(fā)該事件 (row, column, event)

觸發(fā)這個方法然后將參數(shù)都傳遞過去。修改visable的值將菜單欄組件顯現(xiàn)出來。

在菜單欄組件中我們通過獲取到當前點擊時瀏覽器Y軸位置將menu的高度進行合適修改。這樣當我們點擊不同table行。menu的位置也會隨著鼠標點擊時距離瀏覽器Y軸的位置相應的進行變化。

// business-table
<template>
<div>
<el-table
 :data="tableData"
  @row-contextmenu="rowContextmenu"
  border> 
 //...忽略
</el-table>
<rightKeyMenu v-if="visable"
              @rightClick="rightClick" 
              ref="menu" 
              @edit="handleEdit"
              @del="handleDel">
              </rightKeyMenu>
 </div>
</template>
import rightKeyMenu from '@component/right-key-menu/index'
export default {
   components: {
      rightKeyMenu
    },
    methods: {
      rowContextmenu (row, column, event) {
        //如果之前已經(jīng)打開了先關閉一下。
          this.visable = false
        setTimeout(()=>{
          this.visable = true
        },300)
        // 阻止右鍵默認行為
        event.preventDefault()
        this.$nextTick(() => {
          this.$refs.menu.onload(row,column,event)
        })
      },
      rightClick() { 
        this.visable = false
        // 取消鼠標監(jiān)聽事件 菜單欄
        document.removeEventListener('click', this.rightClick)
      },
      handleEdit () {
        // ..do something
      },

      handleDel () {
       // ..do something
      }
    }
  }

有時候列表的操作項并不僅僅局限于修改和刪除。因此我們可以使用插槽自定義需要顯示的內(nèi)容。

<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">編輯</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">刪除</div>
    <div class="rightKeyMenuItem"><slot name="more"></slot></div>
  </div>
</template>

至此。element右鍵菜單的功能就實現(xiàn)完成了。實現(xiàn)這個需求最主要的一點是要計算好右鍵菜單顯示的位置。由于不同頁面table所在位置不同，因此rightKeyClick組件還需要傳遞幾個參數(shù)去進行優(yōu)化適配。這里我就不在細說了。大家可以自己去試試。