ant-design的Table组件自定义空状态
Table,是antd中一个我们经常使用的组件,在官方文档中给出了非常详细的实例以及API,
但在我们在使用过程中可能需要根据项目的要求来定制空状态时的展示。
什么是空状态呢?
在antd的官方文档中他是这么说的
当目前没有数据时,用于显式的用户提示。
初始化场景时的引导创建流程。
我们需要做的就是要自定义Table的 Empty(空状态),但是在查询官方文档的过程中,我们并没有发现Table组件提供修改Empty的相关接口,它直接使用了antd全局默认的空状态。
虽然Table没有提供直接修改Empty的接口,但是提供了全局化配置“Configprovider”,我们可以使用全局化配置来修改antd默认的空状态,而它的使用也非常的简单,我们只需要
import { ConfigProvider } from 'antd';
然后用 <ConfigProvider renderEmpty={我们自己定义的空状态}></ConfigProvider>来包裹我们需要使用自定义空状态的组件即可,代码如下:
import React,{Component} from 'react';
import { Table,ConfigProvider,Icon } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data=[]; const customizeRenderEmpty = () => (
//这里面就是我们自己定义的空状态
<div style={{ textAlign: 'center' }}>
<Icon type="smile" style={{ fontSize: 20 }} />
<p>空状态信息提示</p>
</div>
);
class Home extends Component{
render() {
return(
<ConfigProvider renderEmpty={customizeRenderEmpty}>
<Table columns={columns} dataSource={data} />
</ConfigProvider>
)
}
}
export default Home;
运行结果如下:
我自己也是第一次接触react和antd,在Table里面找了半天没发现相关的接口,最后从头过了一下它官方的文档才发现有“Configprovider”这个东西;
所以在我们接触一些新的UI框架以及前端框架、一些新的技术或者还是其他的一些东西时,
我建议一定要“走马观花”的把相关的东西都看一遍,当然我们不一定要把看到的所有东西原理都弄明白。
但是一定要有一个印象,知道它有这个东西,否则会经常出现一种情况,
就是我们在遇到问题的时候甚至都不知道应该概在谷歌或者百度里如何描述我们的问题,亦或导致我们在向他人请教时,让别人很难抓住我们询问的重点。
参考:https://ant.design/docs/react/introduce-cn
最新文章
- Google C++单元测试框架GoogleTest---GTest的Sample1和编写单元测试的步骤
- 测不准的程序员(Heisenberg Developers)
- SQL联合查询两个表的数据
- MySql MyISAM和InnoDB的区别
- 代码大全 MSIL语言程序设计
- 【问题&;解决】解决创建Android模拟器时提示";No system images installed for this target";的问题
- POI Excel导出样式设置
- 利用Xlinix SDK 建立Linux程序以及对该程序进行调试
- java 获取黑屏信息保存在list中,截取字符执行
- Ubuntu 查看和杀死进程[转]
- 绝美Sysinternals
- 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)
- DTM initialization: failure during startup recovery, retry failed, check segment status (cdbtm.c:1603)
- BZOJ 2016: [Usaco2010]Chocolate Eating( 二分答案 )
- 一个普通底层.NET程序员关于职场瓶颈期的思考,辗转自我提升/跳槽/转行之间
- JS中的变量和输入输出
- PS制作简洁漂亮的立体抽丝文字
- idea 的方法上面注释在格式化后换行问题
- 经测试稳定可用的蓝牙链接通信Demo,记录过程中遇到的问题的思考和解决办法,并整理后给出一个Utils类可以简单调用来实现蓝牙功能
- mysql 案例 ~ 常见案例汇总