table filter is not working when use customFilterDropdown with <a-range-picker /> #7235
Description
- 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