SingleSelectTable.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Table, Radio, Pagination } from 'antd';
  4. import styles from './SingleSelectTable.less';
  5. export default class SingleSelectTable extends Component {
  6. static defaultProps = {
  7. loading: false,
  8. columns: [],
  9. dataSource: [],
  10. pagination: false,
  11. };
  12. static propTypes = {
  13. loading: PropTypes.bool,
  14. columns: PropTypes.array,
  15. dataSource: PropTypes.array,
  16. pagination: PropTypes.oneOfType([
  17. PropTypes.object,
  18. PropTypes.bool,
  19. ]),
  20. };
  21. state = {
  22. selectedRowKey: null,
  23. selectedRow: null,
  24. };
  25. handleRowClick = (record) => {
  26. this.setState({
  27. selectedRow: record,
  28. selectedRowKey: record.key
  29. });
  30. this.props.onSingleTransfer(record);
  31. }
  32. handleTableChange = (page, pageSize) => {
  33. this.props.onChange(page, pageSize);
  34. }
  35. render() {
  36. const { loading, columns, dataSource, pagination } = this.props;
  37. const { selectedRowKey } = this.state;
  38. // 给首列加入单选按钮
  39. const addColumnOnFirst = (cols) => {
  40. const newColumns = [...cols];
  41. newColumns.unshift({
  42. key: '-1',
  43. dataIndex: 'key',
  44. width: 40,
  45. render: (text) => {
  46. return (
  47. <Radio
  48. key={text}
  49. checked={selectedRowKey === text}
  50. />
  51. );
  52. },
  53. });
  54. return newColumns;
  55. };
  56. const onRowClick = (record) => {
  57. return {
  58. onClick: () => this.handleRowClick(record),
  59. };
  60. };
  61. const renderTableFooter = (paginationProps) => {
  62. if (paginationProps) {
  63. return (
  64. <Pagination
  65. {...paginationProps}
  66. onChange={this.handleTableChange}
  67. />
  68. );
  69. } else {
  70. return false;
  71. }
  72. }
  73. return (
  74. <Table
  75. bordered={true}
  76. loading={loading}
  77. footer={() => renderTableFooter(pagination)}
  78. columns={addColumnOnFirst(columns)}
  79. dataSource={dataSource}
  80. pagination={false}
  81. rowKey={record => record.key}
  82. onRow={onRowClick}
  83. onChange={this.handleTableChange}
  84. className={styles.table}
  85. scroll={{y:400}}
  86. />
  87. );
  88. }
  89. }