vue-antd-table 自定义筛选 只筛选当前页；

需求：产品要求列表的表头可以筛选且只筛选当前页面；

配置 - customFilterDropdown

自定义筛选菜单，需要配合 column.customFilterDropdown 使用

配置- filteredValue

切换页面的时候要将它置空

filteredValue

筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组

const filteredInfo = ref() 

-isOnFilter 设置是否筛选

const isOnFilter = ref(false); // 当前是否是筛选状态 0.3s内

点击筛选和重置要将 isOnFilter.value = true

配置一个定时器；0.3秒后 = false

判断 isOnFilter = false 不会请求分页接口会保持在当前页面；

配置插槽 customFilterDropdown

<template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
        <div class="customFilterDropdown">
        <a-checkbox-group  :value="selectedKeys" @change="val => {setSelectedKeys(val)}">
          <div v-for="(item,index) in column.filters" :key="index" :name="item.text"><a-checkbox :value="item.value">{{ item.text }}</a-checkbox></div>
        </a-checkbox-group>
        <div class="filterFooter" >
          <a-button size="small" :disabled="!selectedKeys.length" style="margin-right: 8px"  @click="handleFilterReset(clearFilters,confirm)">
          重置
        </a-button>
        <a-button
          type="primary"
          size="small"
          @click="handleFilterConfirm(confirm)"
        >
          确定
        </a-button>
        </div>
        </div>
        <!-- <slot name="customFilterDropdown" :props="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"></slot> -->
      </template>

样式：

/* 自定义筛选样式 */
  .customFilterDropdown{
      padding: 8px;
      .filterFooter{
      display: flex; 
      justify-content: space-between;
      border-top: 1px solid #f0f0f0;
      padding-top: 6px;
    }
    :deep(.ant-checkbox-wrapper){
      display: flex;
      .ant-checkbox {
      margin-right: 5px;
     }
    }
     .ant-checkbox-group{
      max-height: 264px;
      overflow-y: auto;
      width: 100%;
     }
     .ant-checkbox-group > div{
      padding: 5px 12px;
     }
     .ant-checkbox-group > div:hover {
       background-color: #f5f5f5
     }
  }