vue實(shí)現(xiàn)多條件篩選超簡潔代碼
更新時間：2023年09月07日 08:25:11 作者：香精煎漁
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進(jìn)行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
純vue實(shí)現(xiàn)數(shù)據(jù)篩選邏輯功能，不依賴任何第三方插件、組件，復(fù)制粘貼開箱即用
<template>
<div id="app">
<div class="container">
<div class="CationBox">
<div class="row">
<div class="name">平臺：</div>
<div class="content">
<div v-for="(item,index) in PlatformList" :key="index" @click="PlatformVar=item"
:class="['item',PlatformVar==item?'actvCss':'']">{{item}}</div>
</div>
</div>
<div class="row">
<div class="name">類型：</div>
<div class="content">
<div v-for="(item,index) in TypeList" :key="index" @click="TypeVar=item"
:class="['item',TypeVar==item?'actvCss':'']">{{item}}</div>
</div>
</div>
<div class="row">
<div class="name">成色：</div>
<div class="content">
<div v-for="(item,index) in ConditionList" :key="index" @click="ConditionVar=item"
:class="['item',ConditionVar==item?'actvCss':'']">{{item}}</div>
</div>
</div>
</div>
<!-- 商品展示 -->
<div class="ContentBox">
<div class="DataListBox" v-if="ComDataList.length">
<div class="item" v-for="(item,index) in ComDataList" :key="index">
<div>{{item.Platform}}</div>
<div>{{item.Title}}</div>
<div>{{item.Condition}}</div>
</div>
</div>
<div v-else class="nullCss">暫無相關(guān)商品~</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
PlatformVar:"全部", // 表示當(dāng)前選中的平臺
TypeVar:"全部", // 表示當(dāng)前選中的類型
ConditionVar:"全部", // 表示當(dāng)前選中的成色
PlatformList:["全部","淘寶","天貓","京東","閑魚","轉(zhuǎn)轉(zhuǎn)"], // 平臺
TypeList:["全部","CPU","顯卡","內(nèi)存條","硬盤"], // 類型
ConditionList:["全部","全新","打折","二手","停售"], // 成色
DataList:[ // 模擬接口返回的數(shù)據(jù)結(jié)構(gòu)
{id:1,Title:"i9 13900k",Platform:"淘寶",Type:"CPU",Condition:"全新"},
{id:2,Title:"i9 9900ks",Platform:"閑魚",Type:"CPU",Condition:"停售"},
{id:3,Title:"i9 11900k",Platform:"天貓",Type:"CPU",Condition:"全新"},
{id:4,Title:"i5 13600k",Platform:"轉(zhuǎn)轉(zhuǎn)",Type:"CPU",Condition:"停售"},
{id:5,Title:"i5 10400f",Platform:"京東",Type:"CPU",Condition:"全新"},
{id:6,Title:"i5 10400f",Platform:"淘寶",Type:"CPU",Condition:"二手"},
{id:7,Title:"i3 12100f",Platform:"閑魚",Type:"CPU",Condition:"打折"},
{id:8,Title:"i3 10105f",Platform:"淘寶",Type:"CPU",Condition:"二手"},
{id:9,Title:"i3 10100f",Platform:"京東",Type:"CPU",Condition:"全新"},
{id:10,Title:"Rtx 2060",Platform:"閑魚",Type:"顯卡",Condition:"二手"},
{id:11,Title:"Rtx 2070",Platform:"轉(zhuǎn)轉(zhuǎn)",Type:"顯卡",Condition:"二手"},
{id:12,Title:"Rtx 2080",Platform:"淘寶",Type:"顯卡",Condition:"打折"},
{id:13,Title:"Gtx 1060",Platform:"淘寶",Type:"顯卡",Condition:"全新"},
{id:14,Title:"Gtx 1070",Platform:"閑魚",Type:"顯卡",Condition:"二手"},
{id:15,Title:"Gtx 1080",Platform:"京東",Type:"顯卡",Condition:"全新"},
{id:16,Title:"Rtx 3060",Platform:"淘寶",Type:"顯卡",Condition:"全新"},
{id:17,Title:"Rtx 3070",Platform:"淘寶",Type:"顯卡",Condition:"全新"},
{id:18,Title:"Rtx 3090",Platform:"京東",Type:"顯卡",Condition:"全新"},
{id:19,Title:"愛國者 ddr4 2666",Platform:"京東",Type:"內(nèi)存條",Condition:"全新"},
{id:20,Title:"愛國者 ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:21,Title:"愛國者 ddr4 3200",Platform:"淘寶",Type:"內(nèi)存條",Condition:"打折"},
{id:22,Title:"英睿達(dá) ddr4 2666",Platform:"淘寶",Type:"內(nèi)存條",Condition:"停售"},
{id:23,Title:"英睿達(dá) ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:24,Title:"英睿達(dá) ddr4 3200",Platform:"天貓",Type:"內(nèi)存條",Condition:"全新"},
{id:25,Title:"金士頓 ddr4 2666",Platform:"淘寶",Type:"內(nèi)存條",Condition:"停售"},
{id:26,Title:"金士頓 ddr4 3000",Platform:"閑魚",Type:"內(nèi)存條",Condition:"二手"},
{id:27,Title:"金士頓 ddr4 3200",Platform:"淘寶",Type:"內(nèi)存條",Condition:"打折"},
{id:28,Title:"三星 512Gb",Platform:"天貓",Type:"硬盤",Condition:"全新"},
{id:29,Title:"三星 256Gb",Platform:"閑魚",Type:"硬盤",Condition:"二手"},
{id:30,Title:"三星 128Gb",Platform:"淘寶",Type:"硬盤",Condition:"打折"},
{id:31,Title:"七彩虹 512Gb",Platform:"閑魚",Type:"硬盤",Condition:"二手"},
{id:32,Title:"七彩虹 256Gb",Platform:"京東",Type:"硬盤",Condition:"全新"},
{id:33,Title:"七彩虹 128Gb",Platform:"淘寶",Type:"硬盤",Condition:"全新"},
{id:34,Title:"東芝 512Gb",Platform:"轉(zhuǎn)轉(zhuǎn)",Type:"硬盤",Condition:"全新"},
{id:35,Title:"東芝 256Gb",Platform:"淘寶",Type:"硬盤",Condition:"二手"},
{id:36,Title:"東芝 128Gb",Platform:"京東",Type:"硬盤",Condition:"停售"},
]
};
},
computed: {
ComDataList(){
return this.DataList.filter((item) => {
if((this.PlatformVar=="全部"||this.PlatformVar==item.Platform)&&
(this.TypeVar=="全部"||this.TypeVar==item.Type)&&
(this.ConditionVar=="全部"||this.ConditionVar==item.Condition)){
return item // 把符合條件的數(shù)據(jù)返回,模板中通過this.ComDataList可直接動態(tài)讀取數(shù)據(jù)
}
})
},
},
mounted() {
},
methods: {
}
};
</script>
<style>
* {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
.container{
margin: 100px auto;
width: 700px;
border: 1px solid #ccc;
border-radius: 3px;
}
.CationBox{
width: 100%;
border-bottom: 1px solid #ccc;
}
.row{
width: 100%;
height: 40px;
display: flex;
align-items: center;
padding: 0px 10px;
}
.row > div{
flex-shrink: 0;
}
.row .content{
flex: 1;
display: flex;
}
.row .content .item{
border-radius: 3px;
color: #666;
padding: 5px 12px;
font-size: 12px;
cursor: pointer;
user-select: none;
}
.row .content .actvCss{
background: #39b8ff;
color: #fff;
}
.ContentBox{
width: 100%;
height: 450px;
overflow: auto;
padding: 10px;
}
.DataListBox{
width: 100%;
display: flex;
flex-wrap: wrap;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.DataListBox .item{
padding: 2px 4px;
flex-shrink: 0;
width: 19%;
height: 60px;
color: #666;
border-radius: 3px;
border: 1px solid #ccc;
margin-right: 1.25%;
margin-bottom: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.DataListBox .item div{
font-size: 12px;
}
.DataListBox .item:nth-child(5n){
/* 需要一行顯示幾個商品,nth-child(5n)里的數(shù)字就設(shè)置成幾n */
margin-right: 0px;
}
.nullCss{
margin: 60px auto;
font-size: 14px;
text-align: center;
color: #999;
}
</style>總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)多條件篩選的文章就介紹到這了,更多相關(guān)vue多條件篩選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到正確的運(yùn)用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
element-ui中el-row中設(shè)置:gutter間隔不生效問題
這篇文章主要介紹了element-ui中el-row中設(shè)置:gutter間隔不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
如何使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實(shí)現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue-cli安裝使用less的教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項(xiàng)
這篇文章主要介紹了vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項(xiàng)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue中destroyed方法的使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了Vue按需加載的具體實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
關(guān)于vxe-table復(fù)選框翻頁選中問題及解決
這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁選中問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03