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