自定义增减筛选框

最新推荐文章于 2024-06-04 22:27:54 发布

SAG1027

最新推荐文章于 2024-06-04 22:27:54 发布

阅读量392

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/SAG1027/article/details/138597407

版权

项目中遇到自定义筛选内容，需要根据用户自己需求决定筛选条数。在新增筛选条件时对已选数据进行去除处理。

本组件主要关注点已红圈圈定。筛选框打卡默认显示一条，第一条为定筛选条件“当”，如果大于一条后第一条可以删除，第二条将会顺次排为“当”，当删除的数据条数等于1时，删除图标将隐藏。当新增数据条数等于原始选择项条数时，添加将隐藏。

代码中将会有相应注释。视图部分可自行定义，此处粘贴代码主要辅助理解数据处理。

<a-popover v-model:visible="visible" title="筛选条件" trigger="click" placement="rightTop">
        <div class="screenBox"><img style="width: 20px; height: 20px;margin-right: 10px;" src="@/assets/icons/screen.png"/>筛选</div>
        <template #content>
          <!-- 筛选框内容 -->
            <div class="screenContent">
              <div class="screenList">
                <div class="screenListbox" v-for="(item,index) in screenList" :key="index">
                <!-- 序号和当且判断 -->
                  <div class="screenListboxIcon">{{index+1}}</div><span style="padding: 0px 10px;" >{{ index==0?"当":"且" }}</span>
                  <!-- 第一筛选框监听下拉框打开状态，并对数据进行处理 -->
                   <a-select
                      v-model:value="item.screenValue1"
                      style="width: 180px;margin-right: 10px;"
                      :options="item.option"
                      @dropdownVisibleChange="selectChange(index)"
                    >
                    </a-select>
                    <a-select
                      v-model:value="item.screen2"
                      style="width: 190px"
                      :options="option2"
                    >
                    </a-select>
                    <!-- 判断数据条数大于1条时显示删除图标 -->
                  <img v-if="screenList.length>1" style="width: 20px; height: 20px;margin-left: 15px;" src="@/assets/icons/delete.png" @click="deleteList(index)"/>
                </div>
                <!-- 判断数据条数大于原始选择项条数时隐藏新增图标 -->
                <div class="screenListAdd" v-if="screenList.length<option1.length" @click="add">
                  <span>+</span> 添加
                </div>
              </div>
              <div class="screenBottom">
                <div>
                  <a-button @click="resetBox">重置</a-button>
                </div>
                <div>
                  <a-button @click="cancelBox">取消</a-button>
                  <a-button type="primary">确认</a-button>
                </div>
              </div>
            </div>
        </template>
      </a-popover>

原始数据结构及原始选项数据

// 选项原始数据
      option1:
      [
        {label:"项目考勤率",value:"test1"},
        {label:"项目经理考勤率",value:"test2"},
        {label:"总监理工程师考勤率",value:"test3"},
        {label:"工程支付担保金额",value:"test4"},
        {label:"项目经理",value:"test5"},  
        {label:"总监理工程师",value:"test6"}
      ],
      option2:
      [
        {label:"平均考勤率≧80%",value:"test2-1"} ,
        {label:"80%>平均考勤率≧30%",value:"test2-2"} ,
        {label:"平均考勤率<30%",value:"test2-3"} , 
        {label:"未录入或者为0",value:"test2-4"}  ,
        {label:"大于1000万元",value:"test2-5"}  ,
        {label:"未录入",value:"test2-6"}  
      ],
      // 数据数组原始结构
      screenList:[
        {
          screenValue1:'',
          screenValue2:'',
          option: this.option1
        },
      ],

新增数据处理、选择监听时数据处理、删除时数据处理。（删除时仅需要对数据进行对应删除，选择项内容会在数据选择下拉框打开监听时进行处理）

add(){//点击添加新筛选条件
      let optionData = JSON.parse(JSON.stringify(this.option1)) //获取原始选择项
      this.screenList.forEach(item => {//去除现有数据数组中已选选择项
       optionData.forEach((item2,i)=>{
        if(item.screenValue1 == item2.value){
          optionData.splice(i,1)
        }
       })
      });
      this.screenList.push(//添加一条数据
        {
          screenValue1:'',
          screenValue2:'',
          option:optionData//将去除后的选择项赋值给现有选择项
        }
      )
    },
    selectChange(e){//用户如果先添加多条数据，但未选择时应用此逻辑判断处理选择项
      if(this.screenList[e].screenValue1==''){//当选择项为空时触发，将已被选择项去除后赋值
        let optionData = JSON.parse(JSON.stringify(this.option1)) 
        this.screenList.forEach(item => {
        optionData.forEach((item2,i)=>{
          if(item.screenValue1 == item2.value){
            optionData.splice(i,1)
          }
        })
        });
        this.screenList[e].option = optionData
      }else{//当选择项不为空时触发，将已被选择项去除并排除现选择项后赋值
        let optionData = JSON.parse(JSON.stringify(this.option1)) 
        this.screenList.forEach(item => {
        optionData.forEach((item2,i)=>{
          if(item.screenValue1 == item2.value && this.screenList[e].screenValue1!=item2.value){//排除现选择框选项内容
            optionData.splice(i,1)
          }
        })
        });
        this.screenList[e].option = optionData
      }
    },
    deleteList(e){
      this.screenList.splice(e,1)
    },