Ant-Design Table组件实现自定义空数据状态样式

写在前面

几乎在所有的前端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 = () => (
        
                    未添加明细
                
            }
        >
            
        
    )

    render() {
        return (
            
record.id} components={{ body: { cell: EditableCell, }, }} bordered dataSource={data} columns={this.convertedColumns} rowClassName='editable-row' pagination={{ onChange: cancel, }} /> ); }

实际运行效果如下:


AntD中Table组件空状态效果

最后

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

参考链接:https://blog.csdn.net/m0_58016522/article/details/121094297

你可能感兴趣的:(Ant-Design Table组件实现自定义空数据状态样式)