React Ant-design pro 中自定义table空数据样式

1,001 阅读1分钟

当使用antd中的table组件时,若没有数据,会展示一个空数据页面

image.png 但是往往这个页面,无法满足我们(其实是UI)的需求,所以需要自定义页面;

而table组件里文档只提供了locale:需要提供一个对象 但是这Api并不能满足我们的需求, 所以我们可以使用Ant的全局化配置

  1. 引入ConfigProvider
import {ConfigProvider} from 'antd'
  1. 定义空数据页面
const EmptyContent = ()=> <div> 自定义的页面内容 </div>
  1. 包裹table
<ConfigProvider renderEmpty={EmptyContent}>
    <Table />
</ConfigProvider>

这样就成功自定义了空数据页面