<think>我们将在Vue 3 +
TypeScript + setup语法糖环境下
使用Ant Design Vue的
Table组件，实现一个自定义时间过滤下拉框（customFilterDropdown）。我们将
使用RangePicker（日期范围选择器）来实现时间段的过滤。
步骤：
1. 定义表格列，并在需要自定义过滤的列上设置`customFilterDropdown`属性为true，同时设置`filterIcon`
和`filteredValue`。
2. 在模板中
使用`#customFilterDropdown`插槽来自定义下拉内容，这里
使用`a-range-picker`。
3. 处理过滤逻辑：包括确认过滤
和重置过滤。
4.
使用状态来管理过滤值。
注意：由于是
TypeScript，我们需要定义必要的类型。
代码实现如下：
</think>
在 Vue 3 +
TypeScript + setup 语法糖环境下，
使用 Ant Design Vue
Table 的 `customFilterDropdown` 实现时间下拉框的方法如下：
### 完整实现方案
```vue
<template>
<a-
table
:
columns="
columns"
:data-source="dataSource"
:row-key="record => record.key"
>
<!-- 自定义时间过滤下拉框 -->
<template #customFilterDropdown="{ se
tSelectedKeys, selectedKeys, column }">
<div class="customFilterDropdown">
<a-range-picker
v-model:value="dateRange"
:placeholder="['开始日期', '结束日期']"
style="width: 100%; margin-bottom: 8px"
/>
<div class="filterFooter">
<a-button
size="small"
type="primary"
@click="handleFilterConfirm(se
tSelectedKeys, column.dataIndex)"
>
确定
</a-button>
<a-button
size="small"
@click="handleFilterReset(se
tSelectedKeys)"
>
重置
</a-button>
</div>
</div>
</template>
<!-- 自定义过滤图标 -->
<template #filterIcon="filtered">
<search-outlined :style="{ color: filtered ? '#1890ff' : undefined }" />
</template>
</a-
table>
</template>
<script setup lang="
ts">
import { ref,
reactive } from 'vue';
import {
Table, DatePicker, Button } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import type { ColumnType } from 'ant-design-vue/es/
table/interface';
import dayjs, { Dayjs } from 'dayjs';
// 类型定义
interface DataItem {
key: string;
name: string;
date: string; // ISO 日期字符串
}
const { RangePicker } = DatePicker;
// 表格数据
const dataSource: DataItem[] = [
{ key: '1', name: 'John', date: '2023-01-15' },
{ key: '2', name: 'Jane', date: '2023-02-20' },
{ key: '3', name: 'Bob', date: '2023-03-25' },
];
// 日期范围状态
const dateRange = ref<[Dayjs, Dayjs] | null>(null);
const filterState =
reactive<Record<string, [Dayjs, Dayjs] | null>>({
date: null
});
// 列配置
const
columns: ColumnType<DataItem>[] = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '日期',
dataIndex: 'date',
key: 'date',
customFilterDropdown: true, // 启用自定义下拉
filterIcon: () => <SearchOutlined />,
filteredValue: filterState.date ? [filterState.date] : null, // 绑定过滤状态
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD')
},
];
// 确认过滤
const handleFilterConfirm = (
se
tSelectedKeys: (keys: any[]) => void,
dataIndex: string
) => {
if (dateRange.value) {
se
tSelectedKeys([dateRange.value]);
filterState[dataIndex] = dateRange.value;
}
};
// 重置过滤
const handleFilterReset = (se
tSelectedKeys: (keys: any[]) => void) => {
dateRange.value = null;
se
tSelectedKeys([]);
filterState.date = null;
};
// 应用日期过滤
const applyDateFilter = (value: any, record: DataItem) => {
if (!filterState.date) return true;
const [start, end] = filterState.date;
const recordDate = dayjs(record.date);
return.isAfter(recordDate, start.subtract(1, 'day')) &&
recordDate.isBefore(end.add(1, 'day'));
};
</script>
<style scoped>
/* 自定义过滤下拉样式 */
.customFilterDropdown {
padding: 8px;
min-width: 250px;
}
.filterFooter {
display: flex;
justify-content: space-between;
border-top: 1px solid #f0f0f0;
padding-top: 6px;
}
</style>
```
### 关键实现说明
1 **类型定义**：
-
使用 TypeScript 接口定义数据项类型
- 明确 `Dayjs` 类型用于日期处理[^1]
2 **日期处理**：
-
使用 `dayjs` 库处理日期格式化
和比较
- 范围选择器绑定 `dateRange` 响应式变量
3 **过滤状态管理**：
- `filterState` 对象存储每列的过滤状态
CPT-4 **列配置**：
- `customFilterDropdown: true` 启用自定义下拉
- `filteredValue` 绑定过滤状态实现双向同步
5 **过滤逻辑**：
- `applyDateFilter` 方法实现日期范围过滤
-
使用 `dayjs` 的 `isAfter`
和 `isBefore` 进行日期比较
6 **样式定制**：
-
使用 `scoped` CSS 定制下拉框样式
- 优化过滤页脚布局[^1]
### 注意事项
1. **日期格式兼容性**：
- 确保数据中的日期格式与 `dayjs` 兼容
-
使用 `.format()` 统一显示格式
2. **时区处理**：
- 添加时区处理逻辑（如需要）：
```
ts
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
```
3. **性能优化**：
- 大数据集时
使用防抖处理：
```
ts
import { debounce } from 'lodash';
const handleFilterConfirm = debounce(...);
```
4. **空值处理**：
- 在过滤函数中添加空值保护：
```
ts
if (!filterState.date || !record.date) return true;
```
本文档详述了在使用 TypeScript 开发过程中遇到的 ColumnProps 类型错误，重点介绍了如何处理 'render' 函数类型和 'ellipsis' 属性的类型不匹配问题，并提供了解决方案和常见类型转换技巧。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
