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>
    );
  }
}