标签：rows pageSize title resp 为例 Ant Design total data

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 => { },
                                onm ouseEnter: event => { }, // 鼠标移入行
                                onm ouseLeave: 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>
            </>
        )
    }
}

标签：rows,pageSize,title,resp,为例,Ant,Design,total,data
来源： https://blog.csdn.net/duansamve/article/details/113575229

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。