antd table 记忆翻页勾选

重点就是给 表格列表 指定一个唯一的 key。

 

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

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [], // 保存选中的key
      columns: [ // 表格标题
        {title: 'Name', dataIndex: 'name'},
        {title: 'Age', dataIndex: 'age'},
        {title: 'Address', dataIndex: 'address'},
      ],
    };
  }

  render() {
    const data = []; // 表格列表的数据
    for (let i = 0; i < 46; i++) {
      data.push({
        id: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
      });
    }
    const rowSelection = { // 表格配置项
      onChange: (selectedRowKeys) => { // 监听列表选择
        this.setState({selectedRowKeys});
      },
    };
    return (
      <div>
        <Table
          rowSelection={rowSelection}
          rowKey={record => record.id} // 这里很重要，指定唯一的 key 后就能记住翻页勾选。
          columns={this.state.columns}
          dataSource={data}
        />
      </div>
    );
  }
}