如何修改Ant Table筛选搜索框的默认占位文本？

已准备可运行示例，希望得到修改该占位文本的方法。

查阅Ant Design官方文档后，未找到用于自定义该占位文本的Props，仅发现可以创建完整的自定义筛选下拉框，但不想采用这种方式。

列配置代码如下：

const columns = [
  {
    title: "Address",
    dataIndex: "address",
    filters: [
      {
        text: "London",
        value: "London",
      },
      {
        text: "New York",
        value: "New York",
      },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch: true,
    width: "40%",
  },
];

...

const App = () => (
  <Table columns={columns} dataSource={data} onChange={onChange} />
);

参考截图：

解决方法 #

1. 全局配置（适配所有表格）

用Ant Design的ConfigProvider组件覆盖全局组件默认文案，定位到Table筛选搜索框对应的key修改即可：

import { ConfigProvider } from 'antd';

const App = () => (
  <ConfigProvider
    locale={{
      components: {
        Table: {
          filterSearchPlaceholder: '输入关键词搜索', // 替换为你的自定义文本
        },
      },
    }}
  >
    <Table columns={columns} dataSource={data} onChange={onChange} />
  </ConfigProvider>
);

2. 局部修改（仅针对单个列）

如果只需要修改某一列的占位文本，可通过filterDropdown自定义下拉面板，无需完全重写，仅替换搜索框部分：

import { Input, Menu } from 'antd';

const columns = [
  {
    title: "Address",
    dataIndex: "address",
    filters: [
      { text: "London", value: "London" },
      { text: "New York", value: "New York" },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch: true,
    width: "40%",
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder="搜索地址" // 自定义占位文本
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => confirm()}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Menu
          mode="inline"
          selectedKeys={selectedKeys}
          onClick={({ key }) => {
            setSelectedKeys([key]);
            confirm();
          }}
        >
          {[
            { text: "London", value: "London" },
            { text: "New York", value: "New York" },
          ].map(item => (
            <Menu.Item key={item.value}>{item.text}</Menu.Item>
          ))}
        </Menu>
      </div>
    ),
  },
];

内容的提问来源于stack exchange，提问作者krsna