Ant Design中Spin组件使用（以表格加载为例）

import React, { Component } from 'react'
import { Table, Spin } from 'antd';
import axios from 'axios'

export default class Home extends Component {
    state = {
        selectedRowKeys: [], // 表格选择项Keys
        selectedRows: [], // 表格选择项Rows
        tableData: [],
        total: 0,
        tableLoading: false // 加载状态
    }

    getColumns = () => {
        return [
            {
                title: 'ID',
                dataIndex: 'id',
                width: 30,
            },
            {
                title: '标题',
                dataIndex: 'title',
                width: 500,
                render: (text, record) => <a href="javascript: void(0)" target="_self" onClick={() => this.handleShowDetailBlog(record.id)}>{text}</a>
            },
            {
                title: '内容',
                dataIndex: 'content',
                render(text, record) {
                    return <div dangerouslySetInnerHTML={{ __html: record.content }} style={{}} />
                }
            },
            {
                title: '发布时间',
                dataIndex: 'datetime'
            }
        ];
    }

    // 获取表格数据
    getData(pageNumber, pageSize) {
        this.setState({
            tableLoading: true
        })

        axios.get(`http://localhost:5555/api/blog_list/?pageSize=${pageSize}&pageNumber=${pageNumber}&sortName=id&sortOrder=desc&_=1595230808893`).then((resp) => {
            let ajaxData = [];
            for (let i = 0; i < resp.data.rows.length; i++) {
                ajaxData.push({
                    key: resp.data.rows[i].id,
                    id: resp.data.rows[i].id,
                    title: resp.data.rows[i].title,
                    content: resp.data.rows[i].content.replace(/<[^>]*>|<\/[^>]*>/gm, "").substring(0, 54),
                    datetime: resp.data.rows[i].datetime,
                });
            }

            this.setState({
                tableData: ajaxData,
                total: resp.data.total,
                tableLoading: false
            })
        }, (err) => {
            console.log(err);
            this.setState({
                tableLoading: false
            })
        });
    }

    onChange = (pageNumber, pageSize) => {
        this.pageNum = pageNumber;
        this.pageSize = pageSize;
        this.getData(pageNumber, pageSize);
    };

    onTableSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys, selectedRows });
    };

    componentDidMount() {
        this.getData(1, 10);
    }

    render() {
        // 控制表格选择
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onTableSelectChange
        };

        return (
            <>
                <Spin spinning={this.state.tableLoading} tip="加载中......" size="large">
                    <Table
                        onRow={record => {
                            return {
                                onClick: event => { console.log(record) }, // 点击行
                                onDoubleClick: event => { },
                                onContextMenu: event => { },
                                onMouseEnter: event => { }, // 鼠标移入行
                                onMouseLeave: event => { },
                            };
                        }}
                        rowSelection={rowSelection}
                        columns={this.getColumns()}
                        dataSource={this.state.tableData}
                        pagination={{
                            current: this.pageNum,
                            total: this.state.total,
                            pageSizeOptions: [5, 10, 20, 50, 100],
                            defaultPageSize: 10,
                            showSizeChanger: true,
                            showQuickJumper: true,
                            showTotal: (total, range) => `共 ${total} 条`,
                            onChange: this.onChange
                        }}
                        bordered
                    >
                    </Table>
                </Spin>
            </>
        )
    }
}