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 相关文章推荐
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
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实现水仙花数示例分享
2014/04/03 PHP
PHP实现的策略模式示例
2019/03/20 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
详解js中Json的语法与格式
2016/11/22 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python实现红包裂变算法
2016/02/16 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
简单实现python聊天程序
2018/04/01 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
详解Python学习之安装pandas
2019/04/16 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
html5与css3小应用
2013/04/03 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
一些.net面试题
2014/10/06 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
喷漆工的岗位职责
2014/03/17 职场文书
开学典礼策划方案
2014/05/28 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js