更改 Ant Design Pro 表格分页语言答案

【问题标题】：Change Ant Design Pro Table pagination language更改 Ant Design Pro 表格分页语言
【发布时间】：2020-09-25 12:32:48
【问题描述】：

我已经将ProTable 的语言设置为en-US。一切都已翻译成英文，但分页页脚仍然是中文。如何将分页语言更改为英文？

import ProTable, { ProColumns, IntlProvider, enUSIntl } from '@ant-design/pro-table';

const ProTableList: React.FC<{}> = () => {
  return (
    <IntlProvider value={enUSIntl}>
      <ProTable<TableListItem>
        headerTitle="Example List"
        actionRef={actionRef}
        rowKey="key"
        ...
      />
      ...
    </IntlProvider>
  )
}

【问题讨论】：

标签： ant-design-pro

【解决方案1】：

如果您将 Ant Design 与 Pro 组件 一起使用，则您需要使用非专业版 Ant Design 的国际化。

用 ConfigProvider 包装您的 App 或在这种情况下仅使用 ProTable 组件，如下面的代码所示，您将获得英文翻译。

import React from 'react';
import { ConfigProvider } from 'antd';
import enUS from 'antd/lib/locale/en_US';
import ProTable from '@ant-design/pro-table'

const YourComponent = () => {
    return (
      <ConfigProvider locale={enUS}>
        <ProTable />
      </ConfigProvider>
    );
}

export default YourComponent;

【讨论】：

【解决方案2】：

我想通了，但忘记在此处更新答案。 ProTable 组件在pagination 下有一个showTotal 方法。您可以使用提供的total 和range 变量来修改显示的分页文本。

import ProTable, { ProColumns, IntlProvider, enUSIntl } from '@ant-design/pro-table';

const ProTableList: React.FC<{}> = () => {
  return (
    <IntlProvider value={enUSIntl}>
      <ProTable<TableListItem>
        headerTitle="Example List"
        actionRef={actionRef}
        rowKey="key"
        ...
        pagination={{
          showTotal: (total, range) => (
            <div>{`showing ${range[0]}-${range[1]} of ${total} total items`}</div>
          ),
        }}
      />
      ...
    </IntlProvider>
  )
}

将导致：

【讨论】：

【解决方案3】：

遇到同样的问题，我认为这是一个错误。您可以通过设置禁用它 showTotal 到 false

pagination={{ showTotal: false }}

【讨论】：