本文例項為大家分享了vue實現前端列表多條件篩選的具體程式碼，供大家參考，具體內容如下

1、先上圖：

2、搜尋條件繫結的資料是：

filterForm:{
 schoolName:'',//輸入的學校名稱
 position:'',//選擇的區域區域
 schoolLevel:"",//選擇的學校辦別
},schoolList:[
 {schoolName:'青島市實驗高階中學',schoolLevel:"",position:'山東省青島市城陽區碩陽路69號'},{schoolName:'山東省青島第二中學',position:'山東省青島市嶗山區松嶺路70號'},{schoolName:'山東省青島第一中學',position:'山東省青島市市南區單縣路46號'},{schoolName:'山東省青島第三十九中學',position:'市南區登州路5號'},{schoolName:'山東省青島第六中學',position:'山東省青島市黃島區雲臺山路66號'},{schoolName:'山東省青島第十九中學',position:'山東省青島市即墨區鰲山衛街道衛場路69號'},{schoolName:'青島藝術學校',position:'青島市李滄區九水路176號'},{schoolName:'山東省青島第九中學',position:'山東省青島市黃島區七星河路559號'},{schoolName:'青島電子學校',position:'山東省青島市市北區臺東一路118號'}
],//其中schoolList是元資料
resull:[]//搜尋結果，也是列表迴圈的資料

3、監聽：

watch: {
 // 監聽物件變化
 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實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。