记录一下 ant design 3版本分页器操作

最近接触的公司老项目，用到的是 ant design 3版本的代码，遇到了一些问题记录一下........

                               <Table
                                    bordered
                                    scroll={{ x: 'max-content' }}
                                    rowSelection={this.rowSelection}
                                    pagination={this.state.pagination}
                                    dataSource={TableConfig.datas()}
                                    columns={TableConfig.columns(this.state.type)}
                                    onChange={this.handleTableChange}
                                />

分页器的配置：

            pagination: {
                showSizeChanger: true,                  // 是否显示操作每页多少条数据
                loading: false,
                current: 1,
                showTotal: total => `共 ${111} 条数据`
                // pageSize: PAGE_SIZE,                 // 每页条数
                // pageSizeOptions: PAGE_SIZE_OPTIONS,  // 指定每页可以显示多少条
            },

上述代码配置到 state 中，注释的两个字段依靠后端返回，或者不写

 handleTableChange = pagination => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        pager.pageSize = pagination.pageSize;
        this.setState({ pagination: pager });
    };

上述代码函数绑定在 Table 中，通过点击事件可以获取到一个对象，对象中包含当前页数和当前的页码。依靠参数 pagination 拿到并且修改 state 中的数据

表格获取到 checkbox 复选框执行的事件函数：

rowSelection = {
        // selectedRows ： 获取选中的数据对象（ Object ）
        // selectedRowKeys ： 获取选中的数据对象（ key值 ）
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`);
        },
        getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

上述函数中的 onChange 事件的第一个参数其实拿到的就是当前数据的唯一值，id || key值，如果选择的是多个复选框会以 1,2,3 的形式打印出来。而第二个参数获取到的是整条数据。

那么通过 id 或者 key 就可以连接后端的接口，实现删除编辑等效果。

时小记，终有成。