2BCmsBrowser/src/components/SelectModal/ForSelTable.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { cloneDeep } from 'lodash';
import { Table, Button } from 'antd';

export default class ForSelTable extends PureComponent {
  static propTypes = {
    dataSource: PropTypes.array.isRequired,
    loading: PropTypes.bool.isRequired,
    pagination: PropTypes.object.isRequired,
    columns: PropTypes.array.isRequired,
    rowKeyName: PropTypes.string.isRequired,
    onChange: PropTypes.func,
    onAdd: PropTypes.func,
  };

  render() {
    const {
      rowKeyName,
      dataSource,
      loading,
      pagination,
      className,
      columns,
      selected,
      onChange,
      onAdd,
      ...rest,
    } = this.props;

    const addColumn = {
      title: '操作',
      dataIndex: 'add-btn',
      key: 'add-btn',
      render: (text, record) => (
        <Button
          onClick={() => onAdd(record)}
          disabled={selected.filter(item => item.id === record.id).length}
          size="small"
          type="primary"
        >
          {selected.filter(item => item.id === record.id).length ? '已添加' : '添加'}
        </Button>
      ),
    };

    const curSpaceColumns = cloneDeep(columns);
    curSpaceColumns.push(addColumn);

    return (
      <Table
        rowKey={rowKeyName}
        bordered={true}
        columns={curSpaceColumns}
        dataSource={dataSource}
        loading={loading}
        pagination={pagination}
        onChange={onChange}
        className={className}
        {...rest}
      />
    );
  }
}