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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
在webstorm中配置less的方法详解
Sep 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中的unset究竟会不会释放内存
2013/07/18 PHP
php实现RSA加密类实例
2015/03/26 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python如何实现动态数组
2019/11/02 Python
哪些是python中web开发框架
2020/06/17 Python
python如何停止递归
2020/09/09 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
为什么需要版本控制
2016/10/28 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
行政专员岗位职责
2014/01/02 职场文书
企业负责人任命书
2014/06/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
MySQL事务的隔离级别详情
2022/07/15 MySQL