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 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
详解关于webpack多入口热加载很慢的原因
Apr 24 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
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
七年级英语教学反思
2014/01/15 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
公司寄语大全
2014/04/10 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
项目工作说明书
2014/07/29 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
企业文化学习心得体会
2016/01/21 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android