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

ant-design的Table组件自定义空状态的更多相关文章

  1. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  2. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

  3. element ui table组件自定义合计栏,后台给的数据

    合计的数据是后台传的,所以用table组件自定义一行用来合计 <el-table border fit v-loading.body="listLoading" elemen ...

  4. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  5. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  6. 饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况

    如题,有一个需求,列数量不固定,在一定条件下,可能会(fixedColumn, A2, A3, A4)或(fixedColumn, B2, B3)情况,其中A2, A3, A4会同时出现,B2, B3 ...

  7. Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。

    /** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...

  8. Ant Design的Form组件中FormItem名称相同引起的问题

    1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...

  9. React之ant design的table表格序号连续自增

    render(text,record,index){     return(       <span>{(pagination.current-1)*10+index+1}</spa ...

随机推荐

  1. C之输入输出

    %d - int%ld – long (long int)%lld - long long%hd – short 短整型 (half int) %c - char%f - float%lf – dou ...

  2. SVM算法总结

    svm算法通俗的理解在二维上,就是找一分割线把两类分开,问题是如下图三条颜色都可以把点和星划开,但哪条线是最优的呢,这就是我们要考虑的问题: 首先我们先假设一条直线为 W•X+b =0 为最优的分割线 ...

  3. MLN 讨论 —— inference

    We consider two types of inference: finding the most likely state of the world consistent with some ...

  4. Spark On YARN(Yarn-Cluster模式)启动流程源码分析(二)

    转自:https://www.cnblogs.com/yy3b2007com/p/11087180.html 本章将针对yarn-cluster(--master yarn –deploy-mode ...

  5. 在MFC中添加OpenGL窗口

    虽然MFC已经落伍好多年,而且用来做界面非常的不好用...但是我既不会C#也不会QT,又需要使用OpenGL,就只能将就用了...   一.首先介绍Windows图像程序设计中几个重要的概念:   G ...

  6. Kali中安装 Shodan

    工具介绍 Shodan 是一个搜索引擎,但它与 Google 这种搜索网址的搜索引擎不同,Shodan 是用来搜索网络空间中在线设备的,你可以通过 Shodan 搜索指定的设备,或者搜索特定类型的设备 ...

  7. 13 Ways Companies Do Whatsapp Marketing & Support (May 2019)

    13 Ways Companies Do Whatsapp Marketing & Support (May 2019) By Iaroslav Kudritskiy  We're livin ...

  8. 用Python搞出自己的云词图 | 【带你装起来】

    作者:AI算法与图像处理 参考:http://www.sohu.com/a/149657007_236714 云词图简介 什么词云 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“ ...

  9. Ubuntu中 apt-get -f install 命令

    Ubuntu 下当发现可能是安装的其他软件包不兼容导致了安装包出错时,可以根据提示需要执行“sudo apt-get  -f install ”来卸载之前的冲突包. 如果安装过aptitude包,还可 ...

  10. 【FFMPEG】Windows下使用Visual Studio 2010编译ffmpeg全过程

    原文  http://www.cnblogs.com/xylc/p/3683203.html 主题 FFmpegWindowsVisual Studio ffmpeg是一个开源的多媒体库,使用非常广泛 ...