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多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下2018-03-03
element-ui中el-row中设置:gutter间隔不生效问题
这篇文章主要介绍了element-ui中el-row中设置:gutter间隔不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-cli安装使用less的教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue调用微信JSDK 扫一扫，相册等需要注意的事项，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了vue中destroyed方法的使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了Vue按需加载的具体实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了关于vxe-table复选框翻页选中问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论