antd table 筛选条件如何还原

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