更改 Ant Table 中过滤器搜索的占位符文本

Question

有什么方法可以更改 Ant Table 中的默认占位符文本吗？我使用 CodeSandbox 创建了一个工作示例。有谁可以指教一下吗？

我检查了 Ant 设计文档是否有任何道具可以自定义它，但除了我不想创建它的整个自定义过滤器下拉列表之外没有找到任何道具。

下面是我的代码中的列配置。

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} />
);

图片供参考。

Answer 1

<Table>

组件可以通过 type

 的 

locale

属性传递

export interface TableLocale {
  filterTitle?: string;
  filterConfirm?: React.ReactNode;
  filterReset?: React.ReactNode;
  filterEmptyText?: React.ReactNode;
  filterCheckall?: React.ReactNode;
  filterSearchPlaceholder?: string;
  emptyText?: React.ReactNode | (() => React.ReactNode);
  selectAll?: React.ReactNode;
  selectNone?: React.ReactNode;
  selectInvert?: React.ReactNode;
  selectionAll?: React.ReactNode;
  sortTitle?: string;
  expand?: string;
  collapse?: string;
  triggerDesc?: string;
  triggerAsc?: string;
  cancelSort?: string;
}

相关部分是

filterSearchPlaceholder

。

<Table
  columns={columns}
  dataSource={data}
  onChange={onChange}
  locale={{
    filterSearchPlaceholder: 'put anything here'
  }}
/>