ant-design的Table組件自定義空狀態

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