快捷導(dǎo)航

vue實現(xiàn)前端列表多條件篩選

更新時間：2020年10月26日 13:35:23 作者：❍❏❐❑❒❖❘❙❚

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)前端列表多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)前端列表多條件篩選的具體代碼，供大家參考，具體內(nèi)容如下

1、先上圖：

2、搜索條件綁定的數(shù)據(jù)是：

filterForm:{
 schoolName:'',//輸入的學(xué)校名稱
 position:'',//選擇的區(qū)域區(qū)域
 schoolLevel:"",//選擇的學(xué)校辦別
},
schoolList:[
 {schoolName:'青島市實驗高級中學(xué)',schoolLevel:"",position:'山東省青島市城陽區(qū)碩陽路69號'},
 {schoolName:'山東省青島第二中學(xué)',schoolLevel:"",position:'山東省青島市嶗山區(qū)松嶺路70號'},
 {schoolName:'山東省青島第一中學(xué)',schoolLevel:"",position:'山東省青島市市南區(qū)單縣路46號'},
 {schoolName:'山東省青島第三十九中學(xué)',schoolLevel:"",position:'市南區(qū)登州路5號'},
 {schoolName:'山東省青島第六中學(xué)',schoolLevel:"",position:'山東省青島市黃島區(qū)云臺山路66號'},
 {schoolName:'山東省青島第十九中學(xué)',schoolLevel:"",position:'山東省青島市即墨區(qū)鰲山衛(wèi)街道衛(wèi)場路69號'},
 {schoolName:'青島藝術(shù)學(xué)校',schoolLevel:"",position:'青島市李滄區(qū)九水路176號'},
 {schoolName:'山東省青島第九中學(xué)',schoolLevel:"",position:'山東省青島市黃島區(qū)七星河路559號'},
 {schoolName:'青島電子學(xué)校',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
    }
}

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: