快捷導(dǎo)航

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: