vue實(shí)現(xiàn)前端列表多條件篩選
本文實(shí)例為大家分享了vue實(shí)現(xiàn)前端列表多條件篩選的具體代碼,供大家參考,具體內(nèi)容如下
1、先上圖:
2、搜索條件綁定的數(shù)據(jù)是:
filterForm:{ schoolName:'',//輸入的學(xué)校名稱 position:'',//選擇的區(qū)域區(qū)域 schoolLevel:"",//選擇的學(xué)校辦別 }, schoolList:[ {schoolName:'青島市實(shí)驗(yàn)高級(jí)中學(xué)',schoolLevel:"",position:'山東省青島市城陽(yáng)區(qū)碩陽(yáng)路69號(hào)'}, {schoolName:'山東省青島第二中學(xué)',schoolLevel:"",position:'山東省青島市嶗山區(qū)松嶺路70號(hào)'}, {schoolName:'山東省青島第一中學(xué)',schoolLevel:"",position:'山東省青島市市南區(qū)單縣路46號(hào)'}, {schoolName:'山東省青島第三十九中學(xué)',schoolLevel:"",position:'市南區(qū)登州路5號(hào)'}, {schoolName:'山東省青島第六中學(xué)',schoolLevel:"",position:'山東省青島市黃島區(qū)云臺(tái)山路66號(hào)'}, {schoolName:'山東省青島第十九中學(xué)',schoolLevel:"",position:'山東省青島市即墨區(qū)鰲山衛(wèi)街道衛(wèi)場(chǎng)路69號(hào)'}, {schoolName:'青島藝術(shù)學(xué)校',schoolLevel:"",position:'青島市李滄區(qū)九水路176號(hào)'}, {schoolName:'山東省青島第九中學(xué)',schoolLevel:"",position:'山東省青島市黃島區(qū)七星河路559號(hào)'}, {schoolName:'青島電子學(xué)校',schoolLevel:"",position:'山東省青島市市北區(qū)臺(tái)東一路118號(hào)'} ],//其中schoolList是元數(shù)據(jù) resull:[]//搜索結(jié)果,也是列表循環(huán)的數(shù)據(jù)
3、監(jiān)聽(tīng):
watch: { // 監(jiān)聽(tīng)對(duì)象變化 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組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能
- vue分類篩選filter方法簡(jiǎn)單實(shí)例
- vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁(yè)功能思路詳解
- 基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
- vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
- VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
- vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
- vue+element table表格實(shí)現(xiàn)動(dòng)態(tài)列篩選的示例代碼
- vue3自定義動(dòng)態(tài)不同UI組件篩選框案例
相關(guān)文章
vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件圖文教程
import.meta.glob是Vite提供的一個(gè)特殊功能,它允許你在模塊范圍內(nèi)動(dòng)態(tài)地導(dǎo)入多個(gè)模塊,這篇文章主要給大家介紹了關(guān)于vite5+vue3+?import.meta.glob動(dòng)態(tài)導(dǎo)入vue組件的相關(guān)資料,需要的朋友可以參考下2024-07-07淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來(lái)和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問(wèn)題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下2023-08-08vue中this.$message的實(shí)現(xiàn)過(guò)程詳解
Message在開(kāi)發(fā)中的使用頻率很高,也算是Element-UI組件庫(kù)中比較簡(jiǎn)單的,對(duì)于感興趣的朋友可以一起探討一下Message組件的實(shí)現(xiàn),本文詳細(xì)介紹了vue中this.$message的實(shí)現(xiàn)過(guò)程,感興趣的同學(xué)可以參考一下2023-04-04vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能示例
這篇文章主要介紹了vue input實(shí)現(xiàn)點(diǎn)擊按鈕文字增刪功能,涉及基于vue.js的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼
本文主要介紹了vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)禁止瀏覽器記住密碼功能的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02關(guān)于Vue中keep-alive的作用及使用方法
keep-alive是Vue的內(nèi)置組件,當(dāng)它包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,該組件將不會(huì)銷(xiāo)毀,這篇文章主要介紹了關(guān)于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以參考下2023-04-04