elementUI表格元件實現右鍵選單的功能

語言: CN / TW / HK

theme: scrolls-light

「這是我參與2022首次更文挑戰的第13天,活動詳情檢視:2022首次更文挑戰」。

前言

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

技術棧: elementUI

實現思路

要實現右鍵選單 我們需要定義一個選單欄元件 當用戶點選table的某一行時,我們處理好顯示位置再將選單欄渲染到table上。先實現這個rightKeyMenu元件: ```javascript // right-key-menu.vue


`` 使用rightKeyClick`元件。我們需要監聽使用者右鍵點選table行的操作, 這個功能在elementUI table中已經有相應的方法了:

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

觸發這個方法然後將引數都傳遞過去。修改visable的值將選單欄元件顯現出來。

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

```javascript // business-table import rightKeyMenu from '@component/right-key-menu/index' export default { components: { rightKeyMenu }, methods: { rowContextmenu (row, column, event) { //如果之前已經打開了先關閉一下。 this.visable = false setTimeout(()=>{ this.visable = true },300) // 阻止右鍵預設行為 event.preventDefault() this.$nextTick(() => { this.$refs.menu.onload(row,column,event) }) }, rightClick() { this.visable = false // 取消滑鼠監聽事件 選單欄 document.removeEventListener('click', this.rightClick) }, handleEdit () { // ..do something },

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

} 有時候列表的操作項並不僅僅侷限於修改和刪除。 因此我們可以使用插槽自定義需要顯示的內容。javascript ```

至此。element右鍵選單的功能就實現完成了。實現這個需求最主要的一點是要計算好右鍵選單顯示的位置。由於不同頁面table所在位置不同,因此rightKeyClick元件還需要傳遞幾個引數去進行優化適配。這裡我就不在細說了。大家可以自己去試試。

最後

文章若有不足之處,還請大家批評指出。

感謝您觀看此篇文章 希望能給個👍評論收藏三連!你的點贊就是我寫作的動力。