Antd-vue Table组件添加Click事件,实现点击某行数据教程


Posted in Javascript onNovember 17, 2020

给Table组件添加Click事件,实现点击某行数据操作

customRow 设置行属性 Function(record, index)

通过customRow 属性给table添加自定义事件

<a-table
  :columns="columns"
  :dataSource="data"
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelect: handleSelect}"
  bordered
  :customRow="handleClickRow"
 >
 </a-table>
methods: {
 handleClickRow(record, index){
  return {
   on: {
    click: () => {
     console.log(record, index)
    console.log('点击行内容record' + record)
    console.log('序号索引index' + index)
    }
   }
  }
 }
}

控制台输出:

Antd-vue Table组件添加Click事件,实现点击某行数据教程

补充知识:利用filetr 操作 ant-design table某一行的某一列的数据。点击切换真实数据和加密数据

情景描述:

如果有这样一个需求,在table中的某一列的数据,不能直接展示原始数据,而是使用加密符号代替,只有点击了某行某列之后,才能切换到真实数据,每次点击就是一次切换。

这样类似的需求你会怎么实现?

这里使用ant-design UI框架中的table组件做为例子来讲。

首先,肯定会想到用filter(angular中叫pipe,vue里面叫filter)。

上代码:

<span slot="secret" slot-scope="record">
  <span @click="showCode(record)" style="cursor: pointer;">{{ record | 
  codeFilter(secret, currentRecordId) }}</span>
</span>

这里,我们使用了codeFilter这个filter,它有三个参数。

所以,我们先要创建这个filter,

Vue.filter('permisssionCodeFilter', function (data, secret, id) {
 // 初始状态,所有code都以保密符号显示
 if (!id) {
 if (secret) {
  return replaceString(data.code, '*')
 } else {
  return data.code
 }
 } else { // 如果是点击了某行,则只响应该行code是保密显示还是直接显示,其他非点击行都以保密符号显示
 if (id === data.id) {
  if (secret) {
  return replaceString(data.code, '*')
  } else {
  return data.code
  }
 } else {
  return replaceString(data.code, '*')
 }
 }
})

初始状态下,我们没有点击任何一行,所以id肯定是空的,那么根据secret这个参数是true还是false来决定所有行的数据都是直接显示还是加密符号显示。

replaceString()是一个公共方法,用来替换字符串的值

/**
 * replace string
 * @param string
 * @param target
 */
export function replaceString (string, target) {
 let retValue = string
 const stringArr = string.split('')
 stringArr.forEach(t => {
 retValue = retValue.replace(t, target)
 })
 return retValue
}

接着,如果是点击了某行的那个数据,怎么做到该数据要显示真实数据还是加密符号?如果是点了其他行,怎么隐藏该行的数据,而显示当前点击行的数据?

先看点击事件的方法:

showCode (record) {
  // 如果当前行显示的是密文,则先将点击行的id赋给currentId,以便下面这个条件可以满足,修改screct的值;
  // 如果当前行显示的是明文,则不需要满足下面的条件,secret的值无需修改,因为点击该行之后,所有行数据都是显示密文
  if (this.secret) {
  this.currentId = record.id
  }
  if (!this.currentId || this.currentId === record.id) {
  this.secret = !this.secret
  }
  this.currentId = record.id
 },

如果当前行显示的是密文,则先将点击行的id赋给currentId,以便下面这个条件可以满足,修改screct的值;

如果当前行显示的是明文,则不需要满足下面的条件,secret的值无需修改,因为点击该行之后,所有行数据都是显示密文;

这样就实现了。

要注意的是,这种方法只是临时改变了数据显示在那一列的显示,并没有直接改变表格数据中该列的值。

有些场景是要直接改变表格数据的值,才能在表格上更新,比如该列的值是展示在一个input控件里。

以上这篇Antd-vue Table组件添加Click事件,实现点击某行数据教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 #Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 #Javascript
ant design pro中可控的筛选和排序实例
Nov 17 #Javascript
antd table按表格里的日期去排序操作
Nov 17 #Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 #Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 #Javascript
详解Vue数据驱动原理
Nov 17 #Javascript
You might like
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php实现的生成排列算法示例
2019/07/25 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
简单的js计算器实现
2016/10/26 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[01:13]这,就是刀塔
2014/07/16 DOTA
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
岗位安全生产责任书
2014/07/28 职场文书
市场策划求职信
2014/08/07 职场文书
委托书怎样写
2014/08/30 职场文书
销售员自我评价
2015/03/11 职场文书
新生开学寄语大全
2015/05/28 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL