ant-design的Table组件自定义空状态

Posted 2020-11-23 shellcoochi

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