Antd-vue中如何使用表组件实现添加一个点击事件 - 行业资讯

　　介绍

Antd-vue中如何使用表组件实现添加一个点击事件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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

customRow设置行属性函数(记录,索引)

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

& lt;一个表　　:列=癱olumns" 　　:数据源=癲ata" 　　:rowSelection=皗selectedRowKeys: selectedRowKeys>方法:{ 　　handleClickRow(记录,索引){ 　　返回{ 　　alt=" Antd-vue中如何使用表组件实现添加一个点击事件">

<>强利用filetr操作ant-design表中某一行的某一列的数据。点击切换真实数据和加密数据

<强>情景描述:

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

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

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

首先,肯定会想到用过滤器(角中叫烟斗,vue里面叫过滤器)。

上代码:

& lt;跨槽=皊ecret"slot-scope=皉ecord"比; 　　& lt;跨越@click=皊howCode(记录)“;在{{|记录　　codeFilter(秘密,currentRecordId)}} & lt;/span> 　　& lt;/span>

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

所以,我们先要创建这个过滤器,

Vue.filter (& # 39; permisssionCodeFilter& # 39;功能(数据、秘密、id) {//初始状态,所有代码都以保密符号显示　　如果(id) { 　　如果(秘密){ 　　返回replaceString(数据。代码,& # 39;* & # 39;) 　　其他}{ 　　返回data.code 　　} 　　其他}{//如果是点击了某行,则只响应该行代码是保密显示还是直接显示,其他非点击行都以保密符号显示　　如果(id===data.id) { 　　如果(秘密){ 　　返回replaceString(数据。代码,& # 39;* & # 39;) 　　其他}{ 　　返回data.code 　　} 　　其他}{ 　　返回replaceString(数据。代码,& # 39;* & # 39;) 　　} 　　} 　　})

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

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

/* * 　　*替换字符串　　* @param字符串　　* @param目标　　*/导出功能replaceString(字符串,目标){ 　　让retValue=https://www.yisu.com/zixun/string 　　const stringArr=string.split (”) 　　stringArr。forEach (t=> { 　　retValue=retValue。替换(t,目标) 　　}) 　　返回retValue 　　}

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

<强>先看点击事件的方法:

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

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

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

这样就实现了。

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

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

关于Antd-vue中如何使用表组件实现添加一个点击事件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。