vue实现多条件筛选超简洁代码
作者：香精煎渔
这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下
纯vue实现数据筛选逻辑功能，不依赖任何第三方插件、组件，复制粘贴开箱即用
<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">暂无相关商品~</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
PlatformVar:"全部", // 表示当前选中的平台
TypeVar:"全部", // 表示当前选中的类型
ConditionVar:"全部", // 表示当前选中的成色
PlatformList:["全部","淘宝","天猫","京东","闲鱼","转转"], // 平台
TypeList:["全部","CPU","显卡","内存条","硬盘"], // 类型
ConditionList:["全部","全新","打折","二手","停售"], // 成色
DataList:[ // 模拟接口返回的数据结构
{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:"转转",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:"转转",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:"内存条",Condition:"全新"},
{id:20,Title:"爱国者 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
{id:21,Title:"爱国者 ddr4 3200",Platform:"淘宝",Type:"内存条",Condition:"打折"},
{id:22,Title:"英睿达 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"},
{id:23,Title:"英睿达 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
{id:24,Title:"英睿达 ddr4 3200",Platform:"天猫",Type:"内存条",Condition:"全新"},
{id:25,Title:"金士顿 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"},
{id:26,Title:"金士顿 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"},
{id:27,Title:"金士顿 ddr4 3200",Platform:"淘宝",Type:"内存条",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:"转转",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 // 把符合条件的数据返回,模板中通过this.ComDataList可直接动态读取数据
}
})
},
},
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)里的数字就设置成几n */
margin-right: 0px;
}
.nullCss{
margin: 60px auto;
font-size: 14px;
text-align: center;
color: #999;
}
</style>总结
到此这篇关于vue实现多条件筛选的文章就介绍到这了,更多相关vue多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！