3

antd table 筛选条件如何还原

这是一个来自灵魂的拷问,有没有发现当table,组价经过筛选以后,在次灌入数据之后本来表格应该把原来的筛选重置的,但是等你吧数据灌进去以后会发现,筛选条件竟然还在!!! 怎么办???来看这里我来告诉你答案(有可能不是标准答案但是一定好用)
自己也是百度了但是没百度到,研究了一下就自己弄出来了,这里分享给大家!!
先看antd官网关于table 筛选的属性:
图片描述

能用的我都用红框圈出来的 值得注意的是filtered,antd 的table 支持本地筛选,所以当你每次筛选都是从后端新获取的数据的情况下,你设置了这个属性,就会发生二次筛选,
图片描述 就是这种非单一值筛选的情况,就会发生命名选择的是1956带1968的区间,但是页面显示的却全都是1956的数据,有兴趣的小伙伴自行验证 这里就不多了,毕竟这不是今天的主题!


下面看下代码里面的使用已经下图筛选为例

图片描述下面是对应的代码(自行忽略注释的部分):

图片描述这是一个单选的筛选效果
按照这样 我们就会发现当我切换其他的数据导致table刷新的时候数据确实变了但是筛选条件没变并且筛选按钮依旧在高亮

那么重点来了怎么解决!

解决方法一

直接找到table组件的父组件

图片描述

在AAA区域加一个判定,当符合你条件的时候,挂载表格组件, 否则给null,这样刷新的时候, 组件就会因为重新挂载,重置你的筛选条件
简单粗暴,但是页面的效果很不好,因为不管你是给null 还是给个spin 都会出现以为问题 就是你的表头会消失一下很难受!

解决方法二

下面介绍另一种方法:
图片描述
打开代码看一下 其实筛选框里面的value是我自己设置那我们把这个值清空是不是就可以了呢,那我们在componentWillReceiveProps尝试下,验证的时候会发现,筛选的图标还是亮着的,但是以前选好的选项没有了,但是再次选择和上次一样的筛选条件,确定后没有任何反应,

ok?选项消失了,下一步下一步我们解决下图标的问题
我说过重新贯数据的时候是一个过程 那我么在父组件上给个状态
图片描述

子组件中声明一个isLight为false, 当子组件接受到changeCRFs为true的时候,将子组件的状态机的isLight改为true,
在进行如下判断:
图片描述这样就可以解决筛选图标依旧高亮的问题,

最后一个问题,为什么我筛选条件和上一次条件一样,确认事件无效, 这个就涉及到antd的源码问题了,简单点说就是antd每次都把筛条件通过setSelectedKeys放在自己的状态机里面了,只能通过重置按钮才可以取消,但是在filterDropdown函数中不能模拟触发事件不然会导致循环setstate而报错,
所以我们需要在原有基础上在设一个属性那就是table的filteredValue属性,antd对于属性的说明是组件受控属性,但是直接设置值并没有什么用,但是在这里,因为刚才说到了Radio的value是我们自己控制的,那我们把这个值也附上value的值,在验证一次,ok这次是我可以通过的。

技术总结

  1. 父组件重新贯数据的时候给予状态changeCRFs;
  2. 根据changeCRFs的结果修正子组件中的isLight,在filterIcon中判断是否可以高亮,记得用完打开不然就不会再亮了;
  3. 添加filteredValue属性,赋值和受控选项的值一样就可以了;
  4. componentWillReceiveProps周期中清空state中所有筛选功能声明的状态,赋值 changeCRFs 给 isLight;

这里说的是单个筛选,多个筛选的时候也是一样的,又不会的可以选择联系我,谢谢!我钉钉号:zrtcxjh


machinist
460 声望33 粉丝

javaScript、typescript、 react全家桶、vue全家桶、 echarts、node、webpack