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

2、搜索條件綁定的數據是:
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是元數據
resull:[]//搜索結果,也是列表循環(huán)的數據
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 {
// /拿到有值的參數
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,'輸出篩選結果')
}
}
},
deep:true
}
}
關于vue.js組件的教程,請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue3 去除 vue warn 及生產環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產環(huán)境去除console.log的方法,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06

