带已选条件的自定义单项筛选器页面+逻辑

布局

             <div class="selectRow1Long"  v-if="openList">
                    <div class="productTypeLeft">
                        <div class="t-left">
                            <span class="productType">
                        募集时间:
                     </span>
                        </div>
                        <div class="sp-bx">
                            <span :class="[currentIndex8? 'buXianTwo1' : '', 'buXian']" @click="celOnclick(7)">
                        不限
                    </span>
                        </div>
                    </div>
                    <div class="productTypeRight">
                        <div class="pt-rg" v-for="item in mujiTime" :key="item.key" :class="[String(currentIndex8)===String(item.key)? 'active1' : '', 'type']" @click="getmujiTime(item.type,item.key)">
                            <span >
                       {{item.type}}
                    </span>
                        </div>
                        <div class="block">
                            <div class="type zidingyi">
                                <span >自定义</span>
                            </div>
                            <el-date-picker v-model="value1" @change="dataChange(value1)" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </div>
                </div>

已选条件部分布局

         <div class="SelectedConditions">
                    <div class=ConditionLeft>
                        <span>已选条件:</span>
                    </div>
                    <!-- rightWidth -->
                    <div class="rightWidth">
                        <div v-for="(item,index) in SelectedConditions" :key="index">

                            <div class="ConditionRightMargin" v-if="item.status!=''&&item.type!=''&&item.bank!=''&&item.risk!=''&&item.time!=''&&item.rate!=''&&item.money!=''&&item.muji!=''&&item.saleTarget!=''">
                                <div class="ConditionRight">
                                    <span class="conditions">{{item.status||item.type||item.bank||item.risk||item.time||item.rate||item.money||item.muji||item.saleTarget}}</span>
                                    <span class="chacha"><img src="../../../assets/images/叉叉.png" alt="" @click.stop="removeValue(item.key)"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- rightWidth -->
                    <div class="reset">
                        <el-button plain @click="resetScreen">重置条件</el-button>
                    </div>
                </div>

已选部分数据

   SelectedConditions: [{
                key: 0,
                status: ""
            }, {
                key: 1,
                type: ""
            }, {
                key: 2,
                bank: ""
            }, {
                key: 3,
                time: ""
            }, {
                key: 4,
                risk: ""
            }, {
                key: 5,
                rate: ""
            }, {
                key: 6,
                money: ""
            }, {
                key: 7,
                muji: ""
            },{
                key: 8,
                saleTarget: ""
            }
            ],

自己写的表格组件

       <table class="banktable">
                    <thead>
                        
                        <tr v-if="windowsize=false">
                            <th width="5%">序号</th>
                            <th width="20%">产品名称</th>
                            <th width="10%">发行机构</th>
                            <th width="15%">产品类型</th>
                            <th width="13%" >风险等级<i title="排序" class="iconfont" @click="sort(4)"></i></th>
                            <th width="10%" class="shouyi">预期收益率<i title="排序" class="iconfont" @click="sort(1)"></i></th>
                             <th width="10%" class="shouyi">业绩比较基准</th>
                            <th width="10%" class="qixian">期限(天)<i title="排序" class="iconfont" @click="sort(2)"></i></th>
                            <th width="13%" class="data">募集起始日期<i title="排序" class="iconfont" @click="sort(3)"></i></th>
                        </tr>
                           <tr v-if="windowsize=true">
                            <th width="5%">序号</th>
                            <th width="20%">产品名称</th>
                            <th width="8%">发行机构</th>
                            <th width="14%">产品类型</th>
                            <th width="11%" >风险等级<i title="排序" class="iconfont" @click="sort(4)"></i></th>
                            <th width="10%" class="shouyi">预期收益率<i title="排序" class="iconfont" @click="sort(1)"></i></th>
                             <th width="10%" class="shouyi">业绩比较基准</th>
                            <th width="9%" class="qixian">期限(天)<i title="排序" class="iconfont" @click="sort(2)"></i></th>
                            <th width="13%" class="data">募集起始日期<i title="排序" class="iconfont" @click="sort(3)"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in productList" :key="item.productCode">
                            <td>
                                {{index+1}}
                            </td>
                            <td @click="toDetails(item.productCode)" class="cursor" :title="item.productName">{{item.productName.length > 20 ? `${item.productName.substring(0,20)}...` : item.productName }}</td>
                            <td>{{item.bankName|| '--'}}</td>
                            <td>{{item.productType|| '--'}}</td>
                            <td>
                                <span v-show="item.riskLevel"  :class="[item.riskLevel === '一级（低）' ? 'level-one' : item.riskLevel === '二级（中低）' ? 'level-two' : item.riskLevel === '三级（中）' ? 'level-three' :item.riskLevel === '四级（中高）' ? 'level-four' :item.riskLevel === '五级（高）' ? 'level-five' : '' , 'circle']"></span>
                                {{ item.riskLevel|| '--'}}
                            </td>
                            
                            <td class="shouyi">{{item.profitRate|| '--'}}</td>
                             <!-- <td class="data">{{item.compareRate || '--'}}</td> -->
                               <td class="data">{{item.compareRate || '--'}}</td>
                            <td class="qixian">{{item.investCycleDay===0?0:item.investCycleDay||'--'}}</td>
                            <td class="data">{{item.raiseStartDate|| '--'}}</td>
                        </tr>
                        <tr v-show="productList.length === 0">
                            <td colspan="12">暂无数据...</td>
                        </tr>
                    </tbody>
                </table>

排序方法

  //排序
        sort(index) {

            // this.formData.sortType===false?true:false
            if (this.formData.sortType === false) {
                this.formData.sortType = true
                this.formData.sortBy = index
                this.getAllProduct(this.formData)
            } else {
                this.formData.sortType = false
                this.formData.sortBy = index
                this.getAllProduct(this.formData)
            }

        },

每个类别筛选器选中添加到底部的已选条件

    //定义产品类型值
        getProductType(value, key) {
            // console.log(value, "定义产品类型值")
            this.formData.productType = value
            this.currentIndex2 = key
            this.formData.page = 1;
            // console.log(this.currentIndex2, key, "this.currentIndex2")
            this.SelectedConditions.map(item => {
                if (item.key == 1) {
                    item.type = value;
                }
            })
            //请求接口筛选数据
            this.getAllProduct(this.formData)
        },

通过点击添加到已选条件时，还需要删除每个选择过的条件，删除其实是将对应的数组对象的值设置成空字符串，这样所在项的div页面就不会存在

  //叉叉删除
        removeValue(index) {
            const map = {
                0: "status",
                1: 'type',
                2: 'bank',
                3: 'time',
                4: 'risk',
                5: 'rate',
                6: 'money',
                7: 'muji',
                8:'saleTarget'
            }
通过对象值的设置为空值映射到对应的数组对象里的值设为空，这样还不会出现遍历的错误处理
            var arr = this.SelectedConditions

            arr.map(item => {
                if (index === item.key) {
                    item[map[index]] = "";
                }
            })

            this.formatter(index);
            this.SelectedConditions = arr;

        },

封装switch的筛选传参函数 这样在点右侧差差取消和重置的时候可以直接调用即可

        // 格式化函数
        formatter(index) {
            switch (index) {
                case 0:
                    this.currentIndex1 = null;
                    this.formData.productStatus = 0;
                    this.getAllProduct(this.formData);
                    break;
                case 1:
                    this.currentIndex2 = null;
                    this.formData.productType = "";
                    this.getAllProduct(this.formData);
                    break;
                case 2:
                    this.currentIndex3 = null;
                    this.formData.bankName = "";
                    this.getAllProduct(this.formData);
                    break;
                case 3:
                    this.currentIndex4 = null;
                    this.formData.timeLimit = 0;
                    this.getAllProduct(this.formData);
                    break;
                case 4:
                    this.currentIndex5 = null;
                    this.formData.riskLevel = "";
                    this.getAllProduct(this.formData);
                    break;
                case 5:
                    this.currentIndex6 = null;
                    this.formData.profitRate = 0;
                    this.getAllProduct(this.formData);
                    break;
                case 6:
                    this.currentIndex7 = null;
                    this.formData.investStartAmount = 0;
                    this.getAllProduct(this.formData);
                    break;
                case 7:
                    this.currentIndex8 = null;
                    this.value1 = ""
                    this.formData.raiseType = 0;
                    this.getAllProduct(this.formData);
                    break;
                case 8:
                    this.currentIndex9 = null;
                     $("#sale").addClass("saleActive");
                    // this.value1 = ""
                    this.formData.saleTarget=2
                    this.getAllProduct(this.formData);
                    break;
                default:
            }
        },