vue在table表中悬浮显示数据及右键菜单

针对Vue在table表中悬浮显示数据及右键菜单，我准备了以下完整的攻略。

准备工作

首先，需要进行准备工作，包括：

1. 安装 vue 和 element-ui 。其中，Element-ui 是基于 Vue.js 2.0 的桌面端组件库，所以需要安装。
2. 引入 element-ui 的样式表。
3. 在 main.js 中全局引入并挂载 element-ui 。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI);

悬浮显示数据

接下来，我们来实现在 table 表格中悬浮显示数据的效果。

首先，在 table 表格中，我们需要添加一个 tooltip 组件，用来悬浮显示数据。我们可以使用 element-ui 的 el-tooltip 组件来实现。

<el-table-column label="姓名">
  <template slot-scope="scope">
    <el-tooltip effect="dark" :content="scope.row.name" placement="top">
      {{scope.row.name}}
    </el-tooltip>
  </template>
</el-table-column>

以上代码中，我们在 el-table-column 组件中添加了一个 el-tooltip 组件，用于在悬浮时显示 name 数据。其中，effect="dark" 是 tooltip 的显示效果，content 是 tooltip 显示的内容，placement="top" 是 tooltip 显示的位置。

右键菜单

接下来，我们来实现在 table 表格中添加右键菜单的效果。

首先，我们需要在 table 表格的外层容器上添加 @contextmenu 事件，当右键点击时触发。

<el-table
  :data="tableData"
  style="width: 100%"
  @contextmenu="handleRightClick">
  <!-- 其他代码 -->
</el-table>

其中，handleRightClick 是右键点击事件的回调方法。

接下来，在 methods 中定义 handleRightClick 方法，用来打开右键菜单。

methods: {
  handleRightClick(event, row) {
    event.preventDefault(); // 阻止系统默认右键菜单
    this.$refs.menu.show(event.clientX, event.clientY, row);
  }
}

以上代码中，我们将 event.preventDefault() 添加到右键点击事件中，阻止系统默认的右键菜单。然后通过 this.$refs.menu.show() 打开自定义的菜单，其中 event.clientX 和 event.clientY 是鼠标指针的位置，row 是当前操作的行数据。

接下来，创建一个右键菜单组件 RightClickMenu.vue，并在其中添加菜单项，例如：

<template>
  <el-menu ref="menu" :visible="visible" @click="menuHandler" @hide="visible = false">
    <el-menu-item icon="el-icon-edit" command="edit">编辑</el-menu-item>
    <el-menu-item icon="el-icon-delete" command="delete">删除</el-menu-item>
  </el-menu>
</template>

以上代码中，我们使用 el-menu 组件创建右键菜单，然后添加了两个菜单项，分别为编辑和删除。

最后，在需要使用右键菜单的地方，引入 RightClickMenu.vue 组件，然后添加以下代码：

<right-click-menu ref="menu"></right-click-menu>

其中，ref="menu" 是为了在 handleRightClick 方法中引用右键菜单组件。

至此，完整的Vue在table表中悬浮显示数据及右键菜单的攻略就介绍完了。