iview的table組件自帶的過濾器實現(xiàn)
更新時間：2019年07月12日 16:23:24 作者：哈哈哈
這篇文章主要介紹了iview的table組件自帶的過濾器實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
iview的table組件自帶的過濾器實現(xiàn)
iview框架的table組件自帶的過濾器的使用方法：
<script>
export default {
data () {
return {
columns: [
{
title: 'Name',
key: 'name'
},
//過濾器
//通過給 columns 數(shù)據(jù)的項，設(shè)置 filters，可進行篩選，filters 接收一個數(shù)組，必須指定一個篩選函數(shù)filterMethod
{
title: 'Age',
key: 'age',
filters: [
{
label: 'Greater than 25',
value: 1
},
{
label: 'Less than 25',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
}
]
}
}
}
上面的方法是iview的demo，但是這樣不能實現(xiàn)分頁時篩選，只能篩選當(dāng)前頁，想要實現(xiàn)分頁篩選，只需在filterMethod函數(shù)的
第一行加上一段
this.age = value // age變量為key的名字
這樣就可以實現(xiàn)分也時篩選了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了如何解決el-menu標(biāo)題過長顯示不全問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題2020-08-08
Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用）
這篇文章主要介紹了vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了在vue.js中抽出公共代碼的方法，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
vue+iview+less+echarts實戰(zhàn)項目總結(jié)
本篇文章是作者通過學(xué)習(xí)vue+iview+less+echarts制作一個小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
使用vue-markdown實現(xiàn)markdown文件預(yù)覽
Vue-Markdown 是一個輕量級且高效的庫,用于在Vue.js應(yīng)用程序中渲染Markdown文本,下面我們來看看如何使用vue-markdown實現(xiàn)markdown文件預(yù)覽效果吧2025-04-04
這篇文章主要介紹了在Vue中實現(xiàn)添加全局store方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)
這篇文章主要介紹了Vue學(xué)習(xí)-VueRouter路由基礎(chǔ),路由本質(zhì)上就是超鏈接,xiamian?文章圍繞VueRouter路由的相關(guān)資料展開詳細內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了keep-alive不能緩存多層級路由菜單問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03