2018-06-22T15:02:11Z||2018-06-22T15:08:10Z


不支持全选全部页面,艹。干他。

代码(用rowSelection的onSelectAll和onSelectInvert解决):

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

export default class MyList extends React.Component {
  static cols = [{
    title: 'ID',
    dataIndex: 'id',
  }, {
    title: 'Name',
    dataIndex: 'name',
  }]

  constructor(props) {
    super(props);

    // 这里存的是初始的选择状态
    const { selectedItems } = props;
    // 把初始状态转换成id, 因为初始选择可能是一堆objects, 但是selectedRowKeys要的是IDs
    this.state = {
      selectedRowKeys: selectedItems ? selectedItems.map(s => s.id) : [],
    };
  }

  render() {
    const { dataSource } = this.props;
    const { selectedRowKeys } = this.state;

    // 在这里创建rowSelection
    const rowSelection = {
      selectedRowKeys,
      // 注意onChange不要丢掉,艹
      onChange: this.handleChange,
      onSelectAll: this.handleSelectAll,
    };

    return (
      <Table
        columns={MyList.cols}
        dataSource={dataSource}
        rowKey="id"
        rowSelection={rowSelection}
      />
    );
  }

  handleChange = (selectedRowKeys, selectedRows) => {
    const { onSelectionChange } = this.props;
    // 这里记住设置state
    this.setState({
      selectedRowKeys,
    });
    // bubble up events
    if (onSelectionChange) {
      onSelectionChange(selectedRows);
    }
  }
  
  // 全选 所有页面
  handleSelectAll = (selected) => {
    if (selected) {
      this.handleChange((this.props.dataSource || []).map(s => s.id), this.props.dataSource);
    } else {
      this.handleChange([], []);
    }
  }
}