Antd UI库。覆盖空数据的行为

Question

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

如何做到这一点？< / p>

Answer 1

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

filterConfirm，filterReset，emptyText。

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

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

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

查看文档：{​​{3}}

Answer 2

您可以使用locale的antd表的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属性：

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

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

renderEmpty函数可以返回您想要的任何组件。

此处有更多详细信息：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} />