Hotax/src/components/RBTableSelector/SingleSelectTable.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Radio, Pagination } from 'antd';
import styles from './SingleSelectTable.less';

export default class SingleSelectTable extends Component {
  static defaultProps = {
    loading: false,
    columns: [],
    dataSource: [],
    pagination: false,
  };
  static propTypes = {
    loading: PropTypes.bool,
    columns: PropTypes.array,
    dataSource: PropTypes.array,
    pagination: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.bool,
    ]),
  };
  state = {
    selectedRowKey: null,
    selectedRow: null,
  };

  handleRowClick = (record) => {
    this.setState({
      selectedRow: record,
      selectedRowKey: record.key
    });
    this.props.onSingleTransfer(record);
  }
  handleTableChange = (page, pageSize) => {
    this.props.onChange(page, pageSize);
  }

  render() {
    const { loading, columns, dataSource, pagination } = this.props;
    const { selectedRowKey } = this.state;

    // 给首列加入单选按钮
    const addColumnOnFirst = (cols) => {
      const newColumns = [...cols];
      newColumns.unshift({
        key: '-1',
        dataIndex: 'key',
        width: 40,
        render: (text) => {
          return (
            <Radio
              key={text}
              checked={selectedRowKey === text}
            />
          );
        },
      });
      return newColumns;
    };
    const onRowClick = (record) => {
      return {
        onClick: () => this.handleRowClick(record),
      };
    };
    const renderTableFooter = (paginationProps) => {
      if (paginationProps) {
        return (
          <Pagination
            {...paginationProps}
            onChange={this.handleTableChange}
          />
        );
      } else {
        return false;
      }
    }
    return (
      <Table
        bordered={true}
        loading={loading}
        footer={() => renderTableFooter(pagination)}
        columns={addColumnOnFirst(columns)}
        dataSource={dataSource}
        pagination={false}
        rowKey={record => record.key}
        onRow={onRowClick}
        onChange={this.handleTableChange}
        className={styles.table}
        scroll={{y:400}}
      />
    );
  }
}