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. ylbtech-SQL-W3School-高级:SQL NOT NULL 约束

    ylbtech-SQL-W3School-高级:SQL NOT NULL 约束 1.返回顶部 1. SQL NOT NULL 约束 NOT NULL 约束强制列不接受 NULL 值. NOT NULL ...

  2. springboot之JWT实现权限认证

    1.在pom.xml添加依赖 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jw ...

  3. Qt编写自定义控件36-图片浏览器

    一.前言 本控件主要用来作为一个简单的图片浏览器使用,可以上下翻页显示图片,图片还可以开启过度效果比如透明度渐变,应用场景有查看报警图片运行图片等.此控件非本人原创,来源于网络,我只是修正了好多处BU ...

  4. Qt编写数据可视化大屏界面电子看板9-曲线效果

    一.前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派.香橙派.全志H3.imx6)展示这么华丽的界面 ...

  5. PHPCMS get SQL 返回单条的办法

    {pc:get sql="SELECT * FROM v9_member_detail where userid=1" num="1" return=" ...

  6. Nginx+Keepalived高可用负载均衡

    转自 https://www.jianshu.com/p/da26df4f7d60 Keepalived+Nginx实现高可用Web负载均衡 Master backup vip(虚拟IP) 192.1 ...

  7. 生命周期和Zend引擎

    一切的开始:SAPI接口 SAPI(Server Application Programming Interface)指的是具体应用的编程接口.PHP脚本要执行有很多种方式,通过web服务器,或者直接 ...

  8. 欢迎访问我的csdn博客

    csdn博客:https://blog.csdn.net/qq_27307175 这个里面有:许许多多的专业文章. 本人主要研究:网络工程,VMware虚拟化,docker容器,以及Linux等技术, ...

  9. c++学习笔记_3

    前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用,且本笔记建立在会使用c和java的基础上,只针对与c和java的不同来写 类和对象 ...

  10. 【编程开发】MD5算法原理

    MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用.     MD5功能: ...