element-ui中的表格組件有一個(gè)篩選功能:
實(shí)現(xiàn)方法就是在el-table-column上綁定上filters屬性豺旬，是個(gè)數(shù)組,再去監(jiān)聽篩選觸發(fā)的方法filter-method,這個(gè)方法會(huì)傳入三個(gè)參數(shù)：value, row 和 column,具體看下面的代碼:
<el-table-column label="標(biāo)簽"
prop="tag"
align='center'
column-key="tag"
:filter-method="filterTag"
:filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }, { text: '未知', value: '未知' }]">
</el-table-column>
//filters每一個(gè)數(shù)組項(xiàng)有text和value兩個(gè)屬性
//下面是filterTag方法
filterTag(value, row) { // 一般用兩個(gè)參數(shù)就可以，分別是filters篩選出來的value和每一行row
retrun row.tag === value // 把具體哪個(gè)字段跟篩選的值去比較，然后返回
}
這樣就完成了表格篩選坦刀，但超人鴨肯定不會(huì)講這么一點(diǎn)東西鲤遥。
其實(shí)這種表格篩選更適合本地開發(fā)林艘，因?yàn)槿绻钦嬲_發(fā)，表格基本都是跟分頁器一起的卜朗，就是說真實(shí)項(xiàng)目的表格數(shù)據(jù)獲取只會(huì)獲取某一頁的數(shù)據(jù)咕村，然后點(diǎn)擊下一頁再重新獲取另一頁的數(shù)據(jù)懈涛。所以點(diǎn)了篩選后只會(huì)對(duì)當(dāng)前數(shù)據(jù)進(jìn)行篩選泳猬，如果換頁了就失去效果了。
在真實(shí)開發(fā)過程中埋心，這個(gè)篩選功能一般是在調(diào)用接口的時(shí)候傳入?yún)?shù)拷呆，然后由后端那邊去查詢返回?cái)?shù)據(jù)疫粥。那么剛好在監(jiān)聽的filter-method事件中，可以獲取到篩選的值项秉，那如果在監(jiān)聽的filter-method事件中調(diào)用接口會(huì)順利嗎?
filterTag(value, row) {
//調(diào)用接口的語句
retrun row.tag === value
}
看一下官方的文檔:
filter-method:數(shù)據(jù)過濾使用的方法慷彤，如果是多選的篩選項(xiàng)，對(duì)每一條數(shù)據(jù)會(huì)執(zhí)行多次岁诉，任意一次返回 true 就會(huì)顯示。
什么意思?遇事不決唉侄，console.log!
filterTag(value, row) {
console.log(value) // 隨便打印一點(diǎn)東西
retrun row.tag === value
}
每次篩選都會(huì)打印出很多條數(shù)據(jù)恬叹，表格有多少數(shù)據(jù)就會(huì)打印多少次同眯，我也是看到這才明白，filter-method是去遍歷每一行數(shù)據(jù)硅确，進(jìn)行篩選明肮，也就是方法里面的操作會(huì)執(zhí)行很多次柿估，如果去調(diào)用接口的話會(huì)一時(shí)間發(fā)起很多請(qǐng)求，如果數(shù)據(jù)量大的話的妖，很容易崩掉足陨。
超人鴨繼續(xù)翻了官方文檔，發(fā)現(xiàn)下面這個(gè)方法:
filter-change: 當(dāng)表格的篩選條件發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件星虹，參數(shù)的值是一個(gè)對(duì)象搁凸，對(duì)象的 key 是 column 的 columnKey，對(duì)應(yīng)的 value 為用戶選擇的篩選條件的數(shù)組
很明顯护糖，這個(gè)事件是當(dāng)篩選條件發(fā)生變化時(shí)才會(huì)觸發(fā)嫡良，也就是說每次篩選只會(huì)執(zhí)行一次，正滿足我們的需求寝受。這個(gè)事件是綁定在表格上的:
<el-table @filter-change="filterChange">
</el-table>
//在methods里
filterChange (filterObj) {
console.log(filterObj)
}
按官方文檔說的，參數(shù)是一個(gè)對(duì)象很澄，對(duì)象的key是column 的 columnKey甩苛，我們?cè)谏厦嬉苍谠O(shè)置了el-table-column里設(shè)置了column-key="tag"，那當(dāng)篩選條件改變后讯蒲，例如我選了'男'墨林、'女',該事件觸發(fā)的參數(shù)是什么呢，遇事不決酌呆，console.log:
可以看到肪笋，正如官方文檔所說度迂，對(duì)象的key值就是設(shè)置的columnKey惭墓，對(duì)象的value就是選中篩選條件組的value組合成的數(shù)組而姐，也就是這個(gè):filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }, { text: '未知', value: '未知' }]"選中的value.
那在這個(gè)方法里面拴念，就可以去做調(diào)接口的操作了。
