iview的table組件自帶的過濾器實現(xiàn)
更新時間：2019年07月12日 16:23:24 作者：哈哈哈
這篇文章主要介紹了iview的table組件自帶的過濾器實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
iview的table組件自帶的過濾器實現(xiàn)
iview框架的table組件自帶的過濾器的使用方法：
<script>
export default {
data () {
return {
columns: [
{
title: 'Name',
key: 'name'
},
//過濾器
//通過給 columns 數(shù)據(jù)的項，設置 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)分頁時篩選，只能篩選當前頁，想要實現(xiàn)分頁篩選，只需在filterMethod函數(shù)的
第一行加上一段
this.age = value // age變量為key的名字
這樣就可以實現(xiàn)分也時篩選了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+element實現(xiàn)動態(tài)加載表單
這篇文章主要為大家詳細介紹了vue+element實現(xiàn)動態(tài)加載表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3中的setup一種是setup函數(shù),一種是script setup,這篇文章主要給大家介紹了關于Vue3?-?setup?script使用的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)
組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于如何一步步用Vue.js創(chuàng)建一個組件的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3頭像上傳組件功能,用到了自定義組件v-model的雙向綁定，使用axios + formData 上傳文件，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家詳細介紹了vue使用echart自定義標簽以及顏色，應用于echart 5.0以上版本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12