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

写在前面

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

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>
        );
    }

实际运行效果如下：

最后

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