vue實現(xiàn)前端列表多條件篩選
更新時間:2020年10月26日 13:35:23 作者:❍❏❐❑❒❖❘❙❚
這篇文章主要為大家詳細介紹了vue實現(xiàn)前端列表多條件篩選,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)前端列表多條件篩選的具體代碼,供大家參考,具體內(nèi)容如下
1、先上圖:

2、搜索條件綁定的數(shù)據(jù)是:
filterForm:{
schoolName:'',//輸入的學校名稱
position:'',//選擇的區(qū)域區(qū)域
schoolLevel:"",//選擇的學校辦別
},
schoolList:[
{schoolName:'青島市實驗高級中學',schoolLevel:"",position:'山東省青島市城陽區(qū)碩陽路69號'},
{schoolName:'山東省青島第二中學',schoolLevel:"",position:'山東省青島市嶗山區(qū)松嶺路70號'},
{schoolName:'山東省青島第一中學',schoolLevel:"",position:'山東省青島市市南區(qū)單縣路46號'},
{schoolName:'山東省青島第三十九中學',schoolLevel:"",position:'市南區(qū)登州路5號'},
{schoolName:'山東省青島第六中學',schoolLevel:"",position:'山東省青島市黃島區(qū)云臺山路66號'},
{schoolName:'山東省青島第十九中學',schoolLevel:"",position:'山東省青島市即墨區(qū)鰲山衛(wèi)街道衛(wèi)場路69號'},
{schoolName:'青島藝術學校',schoolLevel:"",position:'青島市李滄區(qū)九水路176號'},
{schoolName:'山東省青島第九中學',schoolLevel:"",position:'山東省青島市黃島區(qū)七星河路559號'},
{schoolName:'青島電子學校',schoolLevel:"",position:'山東省青島市市北區(qū)臺東一路118號'}
],//其中schoolList是元數(shù)據(jù)
resull:[]//搜索結(jié)果,也是列表循環(huán)的數(shù)據(jù)
3、監(jiān)聽:
watch: {
// 監(jiān)聽對象變化
filterForm:{
handler(val, oldVal){
if(val){
// 如果篩選條件全為空,查全部;否則按條件篩選
var objIsEmpty = this.filterForm.schoolName == '' && this.filterForm.schoolLevel == '' && this.filterForm.position == ''
if(objIsEmpty){
this.result = this.schoolList
} else {
// /拿到有值的參數(shù)
let tempFilter = {};
for(var key in this.filterForm) {
if(typeof(this.filterForm[key]) != "undefined" && typeof(this.filterForm[key]) != "null" && this.filterForm[key] != null && this.filterForm[key] != "") {
tempFilter[key] = this.filterForm[key];
}
}
// console.log(tempFilter,'輸出tempFilter')
this.result = this.schoolList.filter(
//篩選
(item) => {
let flag = false;
for(key in tempFilter) {
console.log(key,'輸出key')
if(item[key].toString().indexOf(tempFilter[key].toString()) >= 0) {
flag = true;
} else {
flag = false;
break;
}
}
if(flag) {
return item;
}
}
);
console.log(this.result,'輸出篩選結(jié)果')
}
}
},
deep:true
}
}
關于vue.js組件的教程,請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vite5+vue3+?import.meta.glob動態(tài)導入vue組件圖文教程
import.meta.glob是Vite提供的一個特殊功能,它允許你在模塊范圍內(nèi)動態(tài)地導入多個模塊,這篇文章主要給大家介紹了關于vite5+vue3+?import.meta.glob動態(tài)導入vue組件的相關資料,需要的朋友可以參考下2024-07-07
vue中this.$message的實現(xiàn)過程詳解
Message在開發(fā)中的使用頻率很高,也算是Element-UI組件庫中比較簡單的,對于感興趣的朋友可以一起探討一下Message組件的實現(xiàn),本文詳細介紹了vue中this.$message的實現(xiàn)過程,感興趣的同學可以參考一下2023-04-04
vue-router 基于后端permissions動態(tài)生成導航菜單的示例代碼
本文主要介紹了vue-router 基于后端permissions動態(tài)生成導航菜單的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09

