Element-UI中表格右键的右击事件-添加一个右击菜单选择栏（vue+element）

原创已于 2022-07-20 14:38:07 修改 · 5.7k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

于 2022-05-09 17:38:05 首次发布

vue+element实用方法专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Element-UI的表格中使用@row-contextmenu事件创建右键菜单，包括HTML结构、CSS样式和Vue交互方法。通过实例展示了如何添加菜单项并处理点击事件，适用于前端开发人员学习Element UI的高级用法。

Element-UI中表格的右击事件-添加一个右击菜单选择栏（vue+element）

基于 @row-contextmenu=“” 方法

首先,我们在表格组件中添加@row-contextmenu=""方法
```
<el-table @row-contextmenu="rightClick">
</el-table>
```

然后我们需要有一个右击之后的弹出的菜单选择栏

html部分：

<div id="menu" class="menuDiv">
      <ul class="menuUl">
        <li
          v-for="(item, index) in menus"
          :key="index"
          @click.stop="infoClick(index)"
        >
          <i :class="item.icon"></i> {{ item.name }}
        </li>
      </ul>
</div>

css部分：用了scss

// 菜单样式
  .menuDiv {
    display: none;
    position: absolute;

    .menuUl {
      height: auto;
      width: auto;
      font-size: 14px;
      text-align: left;
      border-radius: 4px;
      border: none;
      background-color: #ffffff;
      color: #606266;
      list-style: none;
      border: 1px solid #ebeef5;

      li {
        width: 140px;
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.47);

        &:hover {
          display: block;
          background-color: #ecf5ff;
          color: #7abbff;
        }
      }
    }
  }

data中的数据

data(){
    return {
      //右键菜单栏
      menus: [
        { name: "菜单一", operType: 1, icon: "el-icon-upload2" },
        { name: "菜单二", operType: 2, icon: "el-icon-folder-add" },
        { name: "菜单三", operType: 3, icon: "el-icon-edit-outline" },
        { name: "菜单四", operType: 4, icon: "el-icon-folder-remove" },
        { name: "菜单五", operType: 5, icon: "el-icon-download" },
      ],
    }
}

接着，我们就要写交互了。

在methods中写：

    // 表格右击的功能
    rightClick(row, column, event) {
      event.preventDefault();
      let menu = document.querySelector("#menu");
      // 根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = event.clientX - 258 + "px";
      menu.style.top = event.clientY - 75 + "px";
      // 改变自定义菜单的隐藏与显示
      menu.style.display = "block";
      menu.style.zIndex = 1000;
	},

讲解:event.preventDefault(); 这个代码是阻止默认的右击弹出框

右键弹出了菜单栏，我们还需要隐藏它。这里我使用的方法是用左击点击表格使得菜单栏隐藏。方法各异，自由发挥

在methods中写：

	// table的左键点击当前行事件
    clickRow(row, column, event) {
      let menu = document.querySelector("#menu");
      menu.style.display = "none";
    },

最后就是我们需要点击菜单栏需要做的工作了。

在methods中写：

	// 右击自定义菜单的点击事件
    infoClick(index) {
      if (index === 0) {
          // 要做的事情
      }
      let menu = document.querySelector("#menu");
      menu.style.display = "none";
    },