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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
js类型检查实现代码
Oct 29 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JS实现判断有效的数独算法示例
Feb 25 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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函数解决SQL injection
2006/12/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
使用PHP编写的SVN类
2013/07/18 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
广告显示判断
2006/08/31 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
学python最电脑配置有要求么
2020/07/05 Python
浅析Python面向对象编程
2020/07/10 Python
python中os.remove()用法及注意事项
2021/01/31 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Ruby如何定义一个类
2012/10/08 面试题
计算机专业自荐信
2013/10/14 职场文书
夜大自我鉴定
2013/10/31 职场文书
财经学院自荐信范文
2014/02/02 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
Python常遇到的错误和异常
2021/11/02 Python