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

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

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

前言

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

技術(shù)棧: elementUI

實(shí)現(xiàn)思路

要實(shí)現(xiàn)右鍵菜單我們需要定義一個(gè)菜單欄組件當(dāng)用戶點(diǎn)擊table的某一行時(shí)，我們處理好顯示位置再將菜單欄渲染到table上。先實(shí)現(xiàn)這個(gè)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)聽(tīng)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)聽(tīng)用戶右鍵點(diǎn)擊table行的操作，這個(gè)功能在elementUI table中已經(jīng)有相應(yīng)的方法了：

row-contextmenu 當(dāng)某一行被鼠標(biāo)右鍵點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 (row, column, event)

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

在菜單欄組件中我們通過(guò)獲取到當(dāng)前點(diǎn)擊時(shí)瀏覽器Y軸位置將menu的高度進(jìn)行合適修改。這樣當(dāng)我們點(diǎn)擊不同table行。menu的位置也會(huì)隨著鼠標(biāo)點(diǎn)擊時(shí)距離瀏覽器Y軸的位置相應(yīng)的進(jìn)行變化。

// 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)打開(kāi)了先關(guān)閉一下。
          this.visable = false
        setTimeout(()=>{
          this.visable = true
        },300)
        // 阻止右鍵默認(rèn)行為
        event.preventDefault()
        this.$nextTick(() => {
          this.$refs.menu.onload(row,column,event)
        })
      },
      rightClick() { 
        this.visable = false
        // 取消鼠標(biāo)監(jiān)聽(tīng)事件 菜單欄
        document.removeEventListener('click', this.rightClick)
      },
      handleEdit () {
        // ..do something
      },

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

有時(shí)候列表的操作項(xiàng)并不僅僅局限于修改和刪除。因此我們可以使用插槽自定義需要顯示的內(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右鍵菜單的功能就實(shí)現(xiàn)完成了。實(shí)現(xiàn)這個(gè)需求最主要的一點(diǎn)是要計(jì)算好右鍵菜單顯示的位置。由于不同頁(yè)面table所在位置不同，因此rightKeyClick組件還需要傳遞幾個(gè)參數(shù)去進(jìn)行優(yōu)化適配。這里我就不在細(xì)說(shuō)了。大家可以自己去試試。