ant-design/docs/pattern/table/demo/data-select-all.md

order, title

order	title
0	全选数据

当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。

import { Table, Alert, Dropdown, Menu, Icon } from 'antd';

const mockData = [];
for (let i = 1; i < 100; i++) {
  mockData.push({
    database: `Ant-Dlist-${i}`,
    detail: '我是内容我是内容我是内容',
    key: i,
  });
}

class PagedTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedRowKeys: [],
      showAlert: false,
      allSelected: false,
    };

    // 在 constructor 中绑定 `this` 到 handler 上，确保 `this` 的指向。
    ['handleSelected', 'handleSelectAll',
     'handleSelectAllRecords', 'handleClearAllRecords'].forEach((method) => {
       this[method] = this[method].bind(this);
     });

    const menu = (
      <Menu>
        <Menu.Item>操作1</Menu.Item>
        <Menu.Item>操作2</Menu.Item>
      </Menu>
    );

    // columns 在 constructor 中初始化，保证 `column.render` 可以访问 `this`，同时不会重复生成。
    this.columns = [{
      title: '数据库名称',
      dataIndex: 'database',
      key: 'database',
    }, {
      title: '详情',
      dataIndex: 'detail',
      key: 'detail',
    }, {
      title: '操作',
      key: 'operation',
      render() {
        return (
          <span>
            <a>删除</a>
            <span className="ant-divider"></span>
            <Dropdown overlay={menu}>
              <a>更多 <Icon className="icon-more" type="down" /></a>
            </Dropdown>
          </span>
        );
      },
    }];
    this.pagination = {
      total: mockData.length,
      showQuickJumper: true,
      pageSize: 5,
      defaultCurrent: 6,
    };
  }

  handleSelected(selectedRowKeys) {
    this.setState({ selectedRowKeys });
  }

  handleSelectAll(selected) {
    this.setState({ showAlert: selected });
  }

  handleSelectAllRecords() {
    const selectedRowKeys = this.props.dataSource.map((record) => record.key);
    this.setState({
      allSelected: true,
      selectedRowKeys,
    });
  }

  handleClearAllRecords() {
    this.setState({
      showAlert: false,
      allSelected: false,
      selectedRowKeys: [],
    });
  }

  render() {
    const props = this.props;
    const state = this.state;
    const rowSelection = {
      selectedRowKeys: state.selectedRowKeys,
      onChange: this.handleSelected,
      onSelectAll: this.handleSelectAll,
    };

    const operation = state.allSelected ?
      <a onClick={this.handleClearAllRecords}>清除所选内容</a> :
      <a onClick={this.handleSelectAllRecords}>
        选择全部 {props.dataSource.length} 项
      </a>;
    const tips = !state.allSelected ?
      `已选 ${state.selectedRowKeys.length} 项。` :
      `已选择全部 ${props.dataSource.length} 项。`;
    const message = <span>{tips}{operation}</span>;

    return (
      <div>
        { state.showAlert ? <Alert type="info" showIcon message={message} /> : null }
        <Table columns={this.columns} pagination={this.pagination}
          rowSelection={rowSelection}
          dataSource={props.dataSource} />
      </div>
    );
  }
}

PagedTable.propTypes = {
  dataSource: React.PropTypes.arrayOf(React.PropTypes.object),
};

ReactDOM.render(<PagedTable dataSource={mockData} />, mountNode);

.icon-more {
  font-size: 9px;
}