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 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
three.js 入门案例详解
Jan 23 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
详解Django中异步任务之django-celery
2020/11/05 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
入党转正申请书范文
2019/05/20 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers