table filter is not working when use customFilterDropdown with <a-range-picker />

[haiting]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

谷歌

Reproduction link

https://www.antdv.com/components/table-cn#components-table-demo-row-selection-custom

Steps to reproduce

code:

<template>
<a-table :columns="columns" :data-source="data">
<!-- Your table content -->
<template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
<a-range-picker v-model="dateRangeFilter" format="YYYY-MM-DD" show-time ref="dateRangeFilter" />
<Button type="primary" size="small" @click="confirm"> 确定 </Button>
<Button size="small" @click="clearFilters"> 重置 </Button>
</template>
</a-table>
</template>

<script lang="jsx">
import { Table, DatePicker, Button } from 'ant-design-vue';
import dayjs from 'dayjs';

export default {
data() {
return {
data: [
{
gmtCreate: '2023-01-01',

}
// Add more data as needed
],
dateRangeFilter: [] // Used to store the filter range
};
},
methods: {
handleFilterDropdownVisibleChange(visible) {
if (visible) {
this.$nextTick(() => {
this.$refs.dateRangeFilter.focus();
});
}
}
},
computed: {
columns() {
return [
{
title: '时间',
dataIndex: 'gmtCreate',
key: 'gmtCreate',
width: 200,
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD'),
customFilterDropdown: {
visible: false,
render: (h, { confirm, clearFilters }) => (
<div>
<DatePicker.RangePicker
v-model={this.dateRangeFilter}
format="YYYY-MM-DD"
show-time
placeholder={['开始时间', '结束时间']}
ref="dateRangeFilter"
/>
<Button
type="primary"
size="small"
onClick={() => {
confirm();
}}
>
确定
</Button>
<Button size="small" onClick={clearFilters}>
重置
</Button>
</div>
)
},
filterDropdownVisibleChange: this.handleFilterDropdownVisibleChange,
onFilter: (value, record) => {
console.log(111111);
const gmtCreate = dayjs(record.gmtCreate).format('YYYY-MM-DD HH:mm');
return (
gmtCreate >= dayjs(value[0]).format('YYYY-MM-DD HH:mm') &&
gmtCreate <= dayjs(value[1]).format('YYYY-MM-DD HH:mm')
);
}
},
];
}
}
};
</script>

What is expected?

when click 'confirm' button, it will filter the table data

What is actually happening?

confirm function is not working

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days