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