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在一段文字中的光标处插入其他文字
Aug 26 Javascript
JS 对象介绍
Jan 20 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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/04 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Js自定义多选框效果的实例代码
2017/07/05 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
法学函授自我鉴定
2014/02/06 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
项目合作意向书范本
2014/04/01 职场文书
读书之星事迹材料
2014/05/12 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
英文导游词
2015/02/13 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Python中异常处理用法
2021/11/27 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle