antd——table的使用（react中获取行内其他数据，index编号分页顺序排列）

编号

写在columns中

 {
 title: '编号',
 dataIndex: 'id',
 align: 'center',
 width: 100,
 //当前页面编号顺着1开始往下排，注意有个缺陷，换页后不能自动累计计数
 render: (text, record, index) => index + 1,
 },

点击获取行数据

{
title: '操作',
dataIndex: 'secret',
align: 'center',
render: (text, record,index) => (
<Space size="middle">
<Button type="link" onClick={() => this.getInformation(record,index) } >获取当前行的年龄</Button>
<Button type="link" onClick={()=>console.log('欢迎点击！')} >正在点击操作下的另外一个按钮</Button>
</Space>
),
},

getInformation=(record,index) => {
console.log('获取当前行的年龄');
console.log(record.age);
console.log(`获取当前页面第${index+1}行，获取编号${index + (this.state.current-1)*this.state.pageSize+1}`);
}

换页编号正常排序

这是为了解决上面说的index换行后会从1开始重新计数的bug
这里的一个思路是：先把当前页码数（current）、一面有多少条记录数（pageSize）保存到state中，借助pagination中onChange函数修改当前页码数，在index计算时借助这两个参数进行计数。
核心代码：
state内容

constructor(props) {
        super(props);
        this.state={
            selectedRowKeys: [], 
            loading: false,
            total:-1,
            pageSize:10,
            current:1,
            data : [],
        }
    }

columns中编号项

{
title: '编号',
dataIndex: 'index',
align: 'center',
width: 100,
//当前页面编号顺着1开始往下排，注意有个缺陷，换页后不能自动累计计数
render: (text, record, index) => index + (this.state.current-1)*this.state.pageSize+1,
},

render中table表格内容

<Table 
rowSelection={rowSelection} 
columns={columns} 
dataSource={data} 
pagination={{
position: ['bottomRight'],
// 显示总条数
showTotal: total => `共 ${total} 条`,
pageSize: this.state.pageSize,
// 设置总条数
total: this.state.data.length,
onChange: (current,remain)=>{
this.setState({current:current})
console.log(`当前页数：${current}`);
},
showSizeChanger: false,
}}
/>

完整代码

import React, { Component } from 'react';
import { Table, Button, Space } from 'antd';
import MainMenu from '../MainMenu';

export default class TableUse extends Component {
    constructor(props) {
        super(props);
        this.state={
            selectedRowKeys: [], 
            loading: false,
            total:-1,
            pageSize:10,
            current:1,
            data : [],
        }
    }
    componentDidMount() {
        this.addData();
    }
    start = () => {
        this.setState({ loading: true });
        setTimeout(() => {
          this.setState({
            selectedRowKeys: [],
            loading: false,
          });
        }, 1000);
      };
    
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    // 获取信息
    getInformation=(record,index) => {
        console.log('获取当前行的年龄');
        console.log(record.age);
        console.log(`获取当前页面第${index+1}行，获取编号${index + (this.state.current-1)*this.state.pageSize+1}`);
    }
    // 加载数据
    addData = () => {
        let data = []
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                name: `Edward King ${i+1}`,
                age: `${30+i}`,
                address: `London, Park Lane no. ${i}`,
            });
        }
        this.setState({ data })
    }

    render() {
        const {data}=this.state
        const columns = [
            {
              title: 'Name',
              align: 'center',
              dataIndex: 'name',
            },
            {
              title: 'Age',
              align: 'center',
              dataIndex: 'age',
            },
            {
              title: 'Address',
              align: 'center',
              dataIndex: 'address',
            },
            {
                title: '操作',
                dataIndex: 'secret',
                align: 'center',
                render: (text, record,index) => (
                  <Space size="middle">
                     <Button type="link" onClick={() => this.getInformation(record,index) } >获取当前行的年龄</Button>
                     <Button type="link" onClick={()=>console.log('欢迎点击！')} >正在点击操作下的另外一个按钮</Button>
                  </Space>
                ),
            },
        ];
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                    Reload
                </Button>
                <span style={{ marginLeft: 8 }}>
                    {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                </span>
                </div>
                <Table 
                    rowSelection={rowSelection} 
                    columns={columns} 
                    dataSource={data} 
                    pagination={{
                        position: ['bottomRight'],
                        // 显示总条数
                        showTotal: total => `共 ${total} 条`,
                        pageSize: this.state.pageSize,
                        // 设置总条数
                        total: this.state.data.length,
                         onChange: (current,remain)=>{
                            this.setState({current:current})
                            console.log(`当前页数：${current}`);
                        },
                        showSizeChanger: false,
                      }}
                />
                <MainMenu></MainMenu>
            </div>
        );
    }
}

学习笔记，有不足地方大佬可以提提意见，应该有更好的解决方法，展示的只是其中一种