Ant-Design Table组件实现自定义空数据状态样式_antdv3 table empty自定义-程序员宅基地

技术标签: Antd  前端  react  typescript  

写在前面

几乎在所有的前端UI中,Table组件都有着不可或缺的作用,Table组件对于数据展示,有着天然的优势。
Ant-Design官网上,对于Table组件,有着非常详细的API和Demo,比如自带可编辑单元格、可编辑行功能,是其他部分UI中所没有的。但是对于Table组件数据为空时的渲染样式,却没有直接的文档说明。本人之前从事Vue+ElementUI进行开发,ElementUI中Table组件,可以直接通过empty-text属性,或者slot="empty"进行配置。效果如下图:
Table组件数据为空时展示效果

ConfigProvider全局化配置

关于ConfigProvider组件,官方API文档链接在此:ConfigProvider API
Ant Design官网对ConfigProvider的解释是:

为组件提供统一的全局化配置。
ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

比如ConfigProvider提供了autoInsertSpaceInButton参数,可以全局移除按钮中2个汉字之间的空格;提供了参数componentSize,可以配置全局ant design组件大小。当然还包括其他一系列参数可以对全局进行配置。
众多参数中,其中一个参数是renderEmpty,可以自定义组件空状态,类型为function(componentName: string): ReactNode,只需要将Table组件外面包一层ConfigProvider,并设置renderEmpty参数,即可实现Table组件的空状态。实例代码如下:

    renderEmpty = () => (
        <Empty
            imageStyle={
    {
    
                height: 60,
            }}
            description={
    
                <span>
                    未添加明细
                </span>
            }
        >
            <Button type='primary' onClick={
    () => data.push({
    id: 123, field: 'aaa', fieldName: 'aaaaaa'})}>添加</Button>
        </Empty>
    )

    render() {
    
        return (
            <Form ref={
    this.formRef} initialValues={
    this.state.editRow} component={
    false}>
                <ConfigProvider renderEmpty={
    this.renderEmpty}>
                    <Table
                        rowKey={
    record => record.id}
                        components={
    {
    
                            body: {
    
                                cell: EditableCell,
                            },
                        }}
                        bordered
                        dataSource={
    data}
                        columns={
    this.convertedColumns}
                        rowClassName='editable-row'
                        pagination={
    {
    
                            onChange: cancel,
                        }}
                    />
                </ConfigProvider>
            </Form>
        );
    }

实际运行效果如下:
AntD中Table组件空状态效果

最后

至此关于Table组件空状态的代码就已经实现完毕。ConfigProvider提供了非常强大的全局化配置功能,不仅仅限于配置空状态,对于ConfigProvider的其他功能,还是很有必要去深入学习的。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_58016522/article/details/121094297

智能推荐

ORACLE---Unit04: SQL(高级查询)-程序员宅基地

文章浏览阅读94次。---(重点复习:子查询、分页查询、decode)--- SQL(高级查询)--- 子查询--- 子查询是嵌套在其它SQL语句当中的,目的是为嵌套的SQL提供数据,以便其执行。---查看谁的工资高于CLARK?---1.先查CLARK的工资SELECT sal FROM emp_RR WHERE ename='CLARK';--->2450---2.工资高于CLARK的员工信息SEL..._"在子查询依赖于管道,其中一个不在where子句中,启用:set enable_pipeline=true;\","

TP5.1 搜索功能分页传参_tp5.1 分页传参前台-程序员宅基地

文章浏览阅读367次。1.html代码<form class="form-horizontal" action="{:url('admin/AuthRoles/lst')}" method="get"><div class="input-group input-group-sm"> <input type="text" id="search" name="search" styl..._tp5.1 分页传参前台

(6)学tp5之响应_tp 立即响应-程序员宅基地

文章浏览阅读815次。在手册中没有见到专门讲响应的地方。只有手册-》架构-》API友好 和 手册-》控制器-》Rest控制器中有一点。tp5中的响应,其实就是方便我们输出各种格式1、路由(用的是强制模式)2、控制器中的代码3、json和jsonp的区别,用dump()打印;jsonp和json不一样的地方,用红框圈出来了..._tp 立即响应

为什么每个扇区的容量一致-程序员宅基地

文章浏览阅读599次。如图。磁盘,每个扇区的容量是一致的

小甲鱼|Python002|用Python设计第一个游戏| 课后测试题及答案_小甲鱼python 作业-程序员宅基地

文章浏览阅读227次。0. 什么是BIF?BIF 就是 Built-in Functions,内置函数。为了方便程序员快速编写脚本程序(脚本就是要编程速度快快快!!!),Python 提供了非常丰富的内置函数,我们只需要直接调用即可,例如 print() 的功能是“打印到屏幕”,input() 的作用是接收用户输入(注:Python3 用 input() 取代了 Python2 的 raw_input(),用法如有不懂请看视频讲解)。太多BIF学不过来怎么办?看不懂英文说明怎么办?Python3的资料太少怎么办?没事,有_小甲鱼python 作业

关于ETTERCAP0.8.3报错问题_ettercap 删除注释后 报错-程序员宅基地

文章浏览阅读2.2k次。今天使用了一下ETTERCAP0.8.3发现了一个问题root@debian:/home/debian# sudo ettercap -Gettercap 0.8.2 copyright 2001-2015 Ettercap Development TeamNo protocol specifiedGTK+ failed to initialize. Is X running?搜索了很久,终于在git上找到了解决方案:就是输入xhost local:root这里要注意一点,不_ettercap 删除注释后 报错

随便推点

C#并行编程高级教程:精通.NET 4 Parallel Extensions_.net4 parallel extension-程序员宅基地

文章浏览阅读5.5k次。基本信息原书名: Professional Parallel Programming with C#: Master Parallel Extensions with .NET 4原出版社: Wrox 作者: (美)Gaston Hillar [作译者介绍] 译者: 郑思遥 房佩慈 出版社:清华大学出版社 ISBN:9787302273561上架时间:2012-1_.net4 parallel extension

浅谈获取url传递的参数值的几种方式_<%=传获取的参数-程序员宅基地

文章浏览阅读1.3w次。以下内容是在开发中本人经常使用的方式,现总结如下:jsp页面中: //el表达式 获取请求参数var id = ${param.id}; var id = &lt;%=request.getParameter("id")%&gt; html页面中: //使用js 获取参数值function getQueryVariable(va..._<%=传获取的参数</div>

solr 实现数据的删除和修改_solr 修改数据 语句-程序员宅基地

文章浏览阅读9.3k次。修改主方法public int saveContent(String enterpriseId, String enterpriseName, String lableType, String resouce, String pubDate,String content) {int state = 0;LBHttpSolrServer server = SolrUtil.g_solr 修改数据 语句

惊人一谈:5G出现将让Wi-Fi产业消亡?-程序员宅基地

文章浏览阅读122次。前几日,网上流出两张微信截图,有行业人士说5G会让Wi-Fi死掉,消息一出,引起了行业内的热议。众所周知5G速度很快,但是怎么突然又牵扯出与Wi-Fi的恩怨呢?行业人士说5G出现,Wi-Fi必死。后续手机将不需要Wi-Fi芯片安装在上面。这些观点论据是否能站得住脚?包括乐鑫科技、全志科技、博通集成这一类有Wi-Fi芯片的公司未来会不会受到5G的冲击?据了解,该资深市场总监在电话里说,目前家庭的Wi..._5g wi-fi产业

什么是灰度发布?能给技术开发带来什么价值_灰度开发-程序员宅基地

文章浏览阅读2.1k次。什么是灰度发布呢?要想了解这个问题就要先明白什么是灰度。灰度从字面意思理解就是存在于黑与白之间的一个平滑过渡的区域,所以说对于互联网产品来说,上线和未上线就是黑与白之分,而实现未上线功能平稳过渡的一种方式就叫做灰度发布。在了解了什么是灰度发布的定义以后,就可以来了解一下灰度发布的具体操作方法了。_灰度开发

k8s资源指标API及metrics-server资源监控-程序员宅基地

文章浏览阅读896次。简述:在k8s早期版本中,对资源的监控使用的是heapster的资源监控工具。但是从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics API 获取资源使用指标,例如容器 CPU 和内存使用情况。这些度量指标可以由用户直接访问,例如通过使用kubectl top 命令,或者使用集群中的控制器。 Metrics API: 通过 Metrics ...

推荐文章

热门文章

相关标签