vue实现多条件筛选超简洁代码

 更新时间:2023年09月07日 08:25:11   作者:香精煎渔  
这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

纯vue实现数据筛选逻辑功能,不依赖任何第三方插件、组件,复制粘贴开箱即用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<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多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/m0_59224033/article/details/128496827

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 关于vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')

    关于vue3+echart5 遇到的坑 Cannot read properties of undefine

    这篇文章主要介绍了vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type'),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue中的事件绑定与解绑方式

    Vue中的事件绑定与解绑方式

    这篇文章主要介绍了Vue中的事件绑定与解绑方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue iview 隐藏Table组件里的某一列操作

    vue iview 隐藏Table组件里的某一列操作

    这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中的vue-print-nb如何实现页面打印

    vue中的vue-print-nb如何实现页面打印

    这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vite Vue3 EsLint Prettier配置步骤极简方法详解

    Vite Vue3 EsLint Prettier配置步骤极简方法详解

    这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue 条件渲染v-if和v-show

    vue 条件渲染v-if和v-show

    这篇文章主要介绍了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项目的问题

    这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue项目中接入websocket时需要ip端口动态部署问题

    vue项目中接入websocket时需要ip端口动态部署问题

    这篇文章主要介绍了vue项目中接入websocket时需要ip端口动态部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue实现目录树结构

    vue实现目录树结构

    这篇文章主要为大家详细介绍了vue实现目录树结构,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue如何通过某个字段获取详细信息

    vue如何通过某个字段获取详细信息

    这篇文章主要介绍了vue如何通过某个字段获取详细信息,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论