需求:产品要求列表的表头可以筛选且只筛选当前页面;
配置 - 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
}
}