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

Question

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

怎么做到这一点？

Answer 1

还有另一种方法可以做到这一点，而无需触及locale属性：

<Table />用 a包裹<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 2

您可以使用localeantd 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.这是一个object,用于define以下事情:

filterConfirm,filterReset,emptyText.

使用emptyText指定text要显示,如果data是empty.像这样:

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

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

查看Doc:https://ant.design/components/table/