elementUI-table之filters數據過濾用法
前幾天在做項目的過程中，用到了elementUI表格。當時的遇到的問題是需要通過從后台返回來的狀態碼，根據判斷將它渲染成文字數據。由於我是剛接手代碼，在代碼中看到了filters這個屬性，感覺可以用它實現。到最后才發現，其實filters是用來做篩選功能的，下面就和大家一起學習一下這個知識點吧。
//截圖來自elementUI-table官方文檔
首先我們需要注意這幾個屬性：
————————————————————————————————————————————————————————
filters：過濾條件
filter-method：過濾方法
column-key：如果需要使用 filter-change 事件，則需要此屬性標識是哪個 column 的篩選條件
filter-change： 當表格的篩選條件發生變化的時候會觸發該事件，參數的值是一個對象，對象的 key 是 column 的 columnKey，對應的 value 為用戶選擇的篩選條件的數組。
formatter：根據條件，格式化內容重寫
————————————————————————————————————————————————————————
舉個例子吧，一個女人在某軟件上找男朋友，這個女人就提出條件（有房，有車，有存款），這就是filters。然后他想通過軟件看到那些是有錢的，那些是有車的，或者那些是有車有房又有存款的，這就是filter-method。當他點擊“有車”時，篩選條件是不是就發生了變化？這就是filter-change。如果有很多女人都在這個軟件上找男朋友，那就會有很多個篩選條件，所以就需要設置column-key來表示每個人自己的篩選條件。最后根據你的條件篩選出來了幾個不錯的，你不知道他們叫什么，你就可以用formatter來給他們取個名字，便於記住。
如上圖紅框部分就是filters里面的數據渲染出來的內容，也就是我們的過濾條件，它是一個數組,每一個條件是一個對象，由key，value的形式組成，如下圖代碼所示：
*這里需要注意的是，如果設置:filter-multiple(多選)為false，他會自動幫我們生成“全部”這一項內容。
接下來是我們的過濾方法：filter-method
*value:篩選條件,row:行
如圖，代碼的意思就是：返回 該行的tag標簽===篩選條件 的項
當你有了篩選條件和篩選方法，你是不是就要篩選了，那就要出發篩選事件filter-change
*需要設置column-key
*這個方法是綁定在表格el-table上的
例如：
最后就是formatter了，通過他對內容重寫
以上所有代碼截圖並沒有聯系性，都是針對某一點而單獨截的圖。所以會出現方法名不一樣，實屬正常。