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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
新手简单了解vue
May 29 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
js get和post请求实现代码解析
Feb 06 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
php中取得文件的后缀名?
2012/02/20 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jquery对表单操作2
2011/04/06 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
用python对excel查重
2020/12/07 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
计算机应用应届生求职信
2014/07/12 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
销售顾问工作计划书
2014/08/15 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年宣传工作总结
2015/04/08 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书