vue实现多条件筛选超简洁代码
更新时间：2023年09月07日 08:25:11 作者：香精煎渔
这篇文章主要给大家介绍了关于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多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
关于vue3+echart5 遇到的坑 Cannot read properties of undefine
这篇文章主要介绍了vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type'),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue中的事件绑定与解绑方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vite Vue3 EsLint Prettier配置步骤极简方法详解
这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了vue 条件渲染v-if和v-show，在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的，有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现，下面就来看看具体实现吧2021-10-10
解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue项目中接入websocket时需要ip端口动态部署问题
这篇文章主要介绍了vue项目中接入websocket时需要ip端口动态部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家详细介绍了vue实现目录树结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue如何通过某个字段获取详细信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论