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

目录

• 前言
• 实现思路
• 最后

前言

最近产品给我提了个需求 ————想要实现用户右键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组件还需要传递几个参数去进行优化适配。这里我就不在细说了。大家可以自己去试试。

最后

到此这篇关于element表格组件实现右键菜单的功能的文章就介绍到这了,更多相关element表格右键菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！