位置：首页-资讯-前端开发

element表格组件实现右键菜单的功能

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

前言

最近产品给我提了个需求 ————想要实现用户右键table的某一行时，显示该行操作栏的功能。觉得这个需求挺有意思的,特此分享给大家。

技术栈: elementUI

实现思路

要实现右键菜单我们需要定义一个菜单栏组件当用户点击table的某一行时，我们处理好显示位置再将菜单栏渲染到table上。先实现这个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) {
           //调整菜单出现的位置
          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'
          // 监听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组件。我们需要监听用户右键点击table行的操作，这个功能在elementUI table中已经有相应的方法了：

row-contextmenu 当某一行被鼠标右键点击时会触发该事件 (row, column, event)

触发这个方法然后将参数都传递过去。修改visable的值将菜单栏组件显现出来。

在菜单栏组件中我们通过获取到当前点击时浏览器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) {
        //如果之前已经打开了先关闭一下。
          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
      }
    }
  }

有时候列表的操作项并不仅仅局限于修改和删除。因此我们可以使用插槽自定义需要显示的内容。

<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右键菜单的功能就实现完成了。实现这个需求最主要的一点是要计算好右键菜单显示的位置。由于不同页面table所在位置不同，因此rightKeyClick组件还需要传递几个参数去进行优化适配。这里我就不在细说了。大家可以自己去试试。