自定义表格空状态

原理：通过全局化配置“Configprovider” 博客园 — ant-design的Table组件自定义空状态 — 小呼喜

先导入组件
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;