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字符串函数String.replace()
Apr 07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
原生JS进行前后端同构
Apr 22 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
node 文件上传接口的转发的实现
Sep 23 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python进行数据提取的方法总结
2016/08/22 Python
利用aardio给python编写图形界面
2017/08/21 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
领班岗位职责范文
2014/02/06 职场文书
文明寝室申报材料
2014/05/12 职场文书
小学教师师德承诺书
2014/05/23 职场文书
毕业生面试求职信
2014/06/23 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
硕士学位论文评语
2014/12/31 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
简单的辞职信模板
2015/05/12 职场文书
2016中秋节问候语
2015/11/11 职场文书
高三化学教学反思
2016/02/22 职场文书