Antd UI 库。覆盖空数据的 <Table /> 行为

Question

如果<Table /> 收到空数据数组，我想渲染一些其他内容。
目前它只显示 'No data'，但我想在那里放一些自定义组件。

如何做到这一点？

Answer 1

有属性个table，locale。这是一个object，用于define以下内容：

filterConfirm, filterReset, emptyText.

如果 data 为 empty，请使用 emptyText 指定要显示的 text。像这样：

let locale = {
  emptyText: 'Abc',
};

<Table locale={locale}  dataSource={dataSource} columns={columns} />

查看文档：https://ant.design/components/table/

Answer 2

可以使用antd的locale props table 也就是Object。除了将 string 传递给 emptyText，您还可以传递 HTML 标签。

let locale = {
  emptyText: (
    <span>
      <p>
        <Icon type="like" />
        Custom Message
      </p>
      <Button>Custom Button</Button>
    </span>
  )
};

<Table locale={locale}  dataSource={dataSource} columns={columns} />

Answer 3

还有另一种方法，无需触及 locale 属性:

用 <ConfigProvider /> 包裹 <Table /> 并设置 renderEmpty 属性:

<ConfigProvider renderEmpty={() => <Empty description="Custom message"/>}>
  <Table />
</ConfigProvider>

renderEmpty函数可以return任何你想要的组件。

此处有更多详细信息：https://ant.design/components/config-provider/#API 来自文档的示例：https://ant.design/components/empty/#components-empty-demo-config-provider

Answer 4

可以使用语言环境。可以直接给空文本

<Table locale={{emptyText:"No data"}  dataSource={dataSource} columns={columns} />

Answer 5

ant design site上有很好的解释。这里是linkhttps://ant.design/components/empty/

Antd UI 库。覆盖空数据的 <Table /> 行为

Antd UI library. Overriding <Table /> behavior on empty data

reactjs

antd