vue用ant design中table表格,点击某行时触发的事件操作


Posted in Javascript onOctober 28, 2020

使用customRow 设置行属性,写对应事件

:customRow="rowClick"

然后在data里面写

rowClick: record => ({
  // 事件
  on: {
   click: () => {
   // 点击改行时要做的事情
   // ......
   console.log(record, 'record')
   }
  }
  })

在官方文档中也写的很清楚

vue用ant design中table表格,点击某行时触发的事件操作

补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件

点击行,有一个customRow。可以配置点击事件。

单元格的自定义分为两种方式。

一种是:通过template标签。

html部分

// text为dataIndex中的值,data为行数据,index为索引值
<template slot="xxx" slot-scope="text,data,index">
{{text|xxxFormat}}
</template>

js部分

//table的columns设定,customRender对应着html中的slot值
columns = [
 { title: "列名", dataIndex: "aaa", scopedSlots: { customRender: 'xxx' }},
]

一种是:customRender。下面给出来的是合并单元格的一段代码。

vm.columns = [
 {
  title: "列名", dataIndex: "aaa",
  customRender: (text, row, index) => {
   var obj = {
    children: text,
    attrs: {}
   }
   if (index % 2 == 0) {
    obj.attrs.rowSpan = 2;
   } else {
    obj.attrs.rowSpan = 0;
   }
   return obj;
  }
 },
];

在合并单元格的代码中可以看出。obj实际上操作的是td的相关属性。children中的内容是放在td中的。这个内容就类似于上面的template。因为能操作td以及内部的内容,所以这种方法的灵活性更加高。对于单元格合并这种操作来说,只能通过customRender来了。

虽然官方给了很多在table中添加a标签的例子,不过都没有对点击事件填写相应的方法调用。

如果只是简单的点击事件,可以通过简单地template调用点击事件。也可以方便的传参数。

<template slot="xxx" slot-scope="text,data,index">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="clickMe">你点我呀</a>
</template>

知识点,来了,如果是合并单元格里面添加点击事件呢?

第一次 尝试

customRender: (text, row, index) => {
 var obj = {
  children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" click='cityClick(text)'>{text}</a>,
  attrs: {}
 };
 if (index % 2 == 0) {
  obj.attrs.rowSpan = 2;
 } else {
  obj.attrs.rowSpan = 0;
 }
 return obj;
},

自己写的时候,心里就觉得别扭,click='cityClick(text)'这个地方值能传进去么?

试了下,呵呵哒,方法都不好使,也不报错。。

第二次尝试,借鉴下customRow

vue用ant design中table表格,点击某行时触发的事件操作

customRender: (text, row, index) => {
 var obj = {
  children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{text}</a>,
  attrs: {},
  on: {
   click: () => {
    this.$message.info(text);
   }
  }
 };
 if (index % 2 == 0) {
  obj.attrs.rowSpan = 2;
 } else {
  obj.attrs.rowSpan = 0;
 }
 return obj;
},

写完之后,自我感觉还是不错的,试一下。

不动如山。。。

第三次尝试,祭出大杀器 vue-jsx

children不能简简单单的写个<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{text}</a>,得给他翻译翻译

vue用ant design中table表格,点击某行时触发的事件操作

虚拟DOM不错的样子

var vm = this;
const columns = [
 { title: 'Name', dataIndex: 'name' },
 {
  title: 'City',
  dataIndex: 'city',
  customRender: (text, row, index) => {
   var child = vm.$createElement("a", {
    domProps: {
     innerHTML: text
    },
    on: {
     click: function () {
      vm.cityClick(text);
     }
    }
   });
   var obj = {
    children: child,
    attrs: {},
   };
   if (index % 2 == 0) {
    obj.attrs.rowSpan = 2;
   } else {
    obj.attrs.rowSpan = 0;
   }
   return obj;
  },
 },

再单独把实现方法拿出来

var child = vm.$createElement("a", {
 domProps: {
  innerHTML: text
 },
 on: {
  click: function () {
   vm.cityClick(text);
  }
 }
});

看看效果

vue用ant design中table表格,点击某行时触发的事件操作

完美~~~

以上这篇vue用ant design中table表格,点击某行时触发的事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
jquery实现倒计时效果
Dec 14 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
使javascript也能包含文件
2006/10/26 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
详解vue v-model
2020/08/31 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python class的继承方法代码实例
2020/02/14 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python Json数据文件操作原理解析
2020/05/09 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
战友聚会邀请函
2014/01/18 职场文书
大学生求职计划书
2014/04/30 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
新教师个人工作总结
2015/02/06 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
队列队形口号
2015/12/25 职场文书