Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)


Posted in Javascript onNovember 21, 2019

最近做的一个项目是基于 vue + AntDesign 的。由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下:

在线演示地址>>

Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign) 

首先新建一个Table组件的实例:

<a-table
 :columns="columns"
 :rowKey="record => { return record.INDEX;}"
 :dataSource="tableData"
/>
...
 const columns = [
 {
  title: "序号",
  dataIndex: "INDEX"
 },
 {
  title: "主题大类",
  dataIndex: "THEME"
 },
 {
  title: "中文名称",
  dataIndex: "CN_NAME"
 },
 {
  title: "英文名称",
  dataIndex: "EN_NAME"
 }
];
...
 data() {
  return {
   columns,
   tableData: [
    { INDEX: 0, THEME: "基础数据", CN_NAME: "地区", EN_NAME: "Area" },
    { INDEX: 1, THEME: "个人信息", CN_NAME: "姓名", EN_NAME: "Name" }
   ]
  };
 }

新建一个Menu菜单组件的实例及其样式:

<a-menu :style="menuStyle" v-if="menuVisible">
   <a-menu-item>{{menuData.THEME}}</a-menu-item>
   <a-menu-item>{{menuData.CN_NAME}}</a-menu-item>
   <a-menu-item>{{menuData.EN_NAME}}</a-menu-item>
  </a-menu>
...
 data() {
  return {
   ...
   menuData: {},
   menuVisible: false,
   menuStyle: {
    position: "absolute",
    top: "0",
    left: "0",
    border: "1px solid #eee"
   }
  };
 }

注意这里给Menu加样式主要是为了实现点右键时Menu菜单出现在鼠标位置,所以我用了position: "absolute"来定义。

下面就是最重要的,通过Table组件的customRow参数来设置鼠标右键事件。首先添加Table组件的customRow参数:

<a-table
   ...
   :customRow="customClick"
  />

然后在data里添加customClick的右键方法,以及在methods里添加body的click方法。添加body的click方法是为了在出现右键菜单后,点击左键时关闭菜单。

data() {
  return {
   ...
   customClick: record => ({
    on: {
     contextmenu: e => {
      e.preventDefault();
      this.menuData = record;
      this.menuVisible = true;
      this.menuStyle.top = e.clientY + "px";
      this.menuStyle.left = e.clientX + "px";
      document.body.addEventListener("click", this.bodyClick);
     }
    }
   })
  };
 },
 methods: {
  bodyClick() {
   this.menuVisible = false;
   document.body.removeEventListener("click", this.bodyClick);
  }
 }

至此,Ant Design Vue中Table组件行内右键菜单就实现了。完整代码如下:

<template>
 <div>
  <a-table
   :columns="columns"
   :rowKey="record => { return record.INDEX;}"
   :dataSource="tableData"
   :customRow="customClick"
  />
  <a-menu :style="menuStyle" v-if="menuVisible">
   <a-menu-item>{{menuData.THEME}}</a-menu-item>
   <a-menu-item>{{menuData.CN_NAME}}</a-menu-item>
   <a-menu-item>{{menuData.EN_NAME}}</a-menu-item>
  </a-menu>
 </div>
</template>
<script>
const columns = [
 {
  title: "序号",
  dataIndex: "INDEX"
 },
 {
  title: "主题大类",
  dataIndex: "THEME"
 },
 {
  title: "中文名称",
  dataIndex: "CN_NAME"
 },
 {
  title: "英文名称",
  dataIndex: "EN_NAME"
 }
];
export default {
 data() {
  return {
   columns,
   tableData: [
    { INDEX: 0, THEME: "基础数据", CN_NAME: "地区", EN_NAME: "Area" },
    { INDEX: 1, THEME: "个人信息", CN_NAME: "姓名", EN_NAME: "Name" }
   ],
   menuData: {},
   menuVisible: false,
   menuStyle: {
    position: "absolute",
    top: "0",
    left: "0",
    border: "1px solid #eee"
   },
   customClick: record => ({
    on: {
     contextmenu: e => {
      e.preventDefault();
      this.menuData = record;
      this.menuVisible = true;
      this.menuStyle.top = e.clientY + "px";
      this.menuStyle.left = e.clientX + "px";
      document.body.addEventListener("click", this.bodyClick);
     }
    }
   })
  };
 },
 methods: {
  bodyClick() {
   this.menuVisible = false;
   document.body.removeEventListener("click", this.bodyClick);
  }
 }
};
</script>

总结

以上所述是小编给大家介绍的Vue中Table组件行内右键菜单实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue element 中的table动态渲染实现(动态表头)
Nov 21 #Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 #Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JSON取值前判断
2014/12/23 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
一张图带我们入门Python基础教程
2017/02/05 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
省文明单位申报材料
2014/05/08 职场文书
倡议书范文格式
2014/05/12 职场文书
护林防火标语
2014/06/27 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
赡养老人协议书范本
2015/08/06 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
实战Python爬虫爬取酷我音乐
2022/04/11 Python