在 Ant Design 表格组件中,如果在筛选表头中打开了 antd 的自带筛选框,在快速输入字符时会出现筛选弹出框闪烁的情况。解决该问题的方法是对该弹出框做一些样式修改。
在表格组件所在的文件中引入以下样式:
.ant-table-filter-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
background-color: #fafafa;
color: #1890ff;
}
.ant-table-filter-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled):hover {
background-color: #e6f7ff;
color: #1890ff;
}
参考示例代码:
import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';
import './table.css';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},
{
text: 'Submenu',
value: 'Submenu',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
onFilter: (value, record) => record.name.indexOf(value) === 0,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1