基於vue實現的多條件下拉選擇篩選功能案例

基於Vue實現的多條件篩選功能，可用於篩選商品之類的功能；

效果圖：

<!--排序篩選-->
<div class="the-sorts" id="vue-sorts">
    <div class="pick-con">
        <div class="tablist">
            <ol class="sort-ol">
                <li class="tk" v-for="(v,index) in sorts" :class="{cur:v.isActive}" @click="changeTab(index)">
                    <span class="tt" v-cloak ref="chooseTitle">{{v.title}}</span>
                    <i class="i"></i>
                </li>
            </ol>
        </div>
        <div class="droplist" >
            <ul class="sort-ul" v-for="(v,index) in sorts"  v-show="v.isShow">
                <li class="tg" v-for="(c,index) in v.cidArr" :class="{cur:c.isChecked}" @click="chooseItem(index)">
                    <span class="ti" v-cloak>{{c.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    //vue排序篩選
    const vueSorts = new Vue({
        el: '#vue-sorts',
        data(){
            return{
                sorts:[], //排序列表
                curIndex:"0",   //切換欄當前索引值
                typeId:"1001",  //選擇類型id
                followerId:"1001",  //粉絲量id
            }
        },
        created(){
            this.getSortJson();
        },
        methods:{
            //獲取排序的數據
            getSortJson(){
                let url = 'json/sortTest.json';
                axios.get(url)
                    .then(response =>{
                    this.sorts = response.data.data;
                })
                .catch(error => {
                    console.log(error)
                })
            },

            //切換欄
            changeTab(index){
                let vm = this,
                    sorts = vm.sorts;
                this.curIndex = index;
                sorts.forEach((v,i)=>{
                    vm.$set(v, 'isActive', false);
                    if(index!==i){
                        vm.$set(v, 'isShow', false);
                    }
                })
                sorts[index].isActive = true;
                sorts[index].isShow = !sorts[index].isShow;
            },

            //選擇選項
            chooseItem(index){
                let vm = this,
                    sorts = vm.sorts,
                    curIndex = vm.curIndex;
                sorts[curIndex].cidArr.forEach((c,k)=> {
                    c.isChecked = false;
                })
                sorts[curIndex].cidArr[index].isChecked = true;
                var chooseId = sorts[curIndex].cidArr[index].key,
                    chooseTitle = sorts[curIndex].cidArr[index].title;
                if(curIndex==0){
                    vm.typeId = chooseId;
                }else if(curIndex==1){
                    vm.followerId = chooseId;
                }
                vm.$refs.chooseTitle[curIndex].innerText = chooseTitle;
                sorts[curIndex].isShow = false;
            }
        }
    })
</script>

具體案例可訪問：https://github.com/xiexikang/vue-sortSelect