Ant Design Pro查询表格组件控制列表是否可选和Alert是否渲染的改动

站长说：本文代码可以借鉴，也方便扩展，比如再封装显示单选框还是复选框？

———————————————————–

Components文件夹下StandardTable文件夹中的index.js

import React, { PureComponent, Fragment } from 'react';
import { Table, Alert } from 'antd';
import styles from './index.less';

function initTotalList(columns) {
  const totalList = [];
  columns.forEach(column => {
    if (column.needTotal) {
      totalList.push({ ...column, total: 0 });
    }
  });
  return totalList;
}

class StandardTable extends PureComponent {
  constructor(props) {
    super(props);
    const { columns } = props;
    const needTotalList = initTotalList(columns);

    this.state = {
      selectedRowKeys: [],
      needTotalList,
    };
  }

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      const needTotalList = initTotalList(nextProps.columns);
      this.setState({
        selectedRowKeys: [],
        needTotalList,
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    const { needTotalList: list } = this.state;
    const { onSelectRow } = this.props;
    let needTotalList = [...list];
    needTotalList = needTotalList.map(item => {
      return {
        ...item,
        total: selectedRows.reduce((sum, val) => {
          return sum + parseFloat(val[item.dataIndex], 10);
        }, 0),
      };
    });

    if (onSelectRow) {
      onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys, needTotalList });
  };

  handleTableChange = (pagination, filters, sorter) => {
    const { onChange } = this.props;
    onChange(pagination, filters, sorter);
  };

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  };

  render() {
    const { selectedRowKeys, needTotalList } = this.state;
    const {
      data: { list, pagination },
      loading,
      columns,
      rowKey,
      /* ****************增加***************** */
      rowSelect,
      showAlert,
      /* ****************增加***************** */
    } = this.props;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    /* ****************改动***************** */
    const rowSelection = rowSelect ? {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    } : null;
    /* ****************改动***************** */

    /* ****************Alert改动***************** */
    const alertPanel = () => {
      if (showAlert) {
        return (
          <div className={styles.tableAlert}>
            <Alert
              message={
                <Fragment>
                  已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项  
                  {needTotalList.map(item => (
                    <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.title}
                      总计 
                      <span style={{ fontWeight: 600 }}>
                      {item.render ? item.render(item.total) : item.total}
                    </span>
                  </span>
                  ))}
                  <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                    清空
                  </a>
                </Fragment>
              }
              type="info"
              showIcon
            />
          </div>
        )
      }
    };
    /* ****************Alert改动***************** */

    return (
      <div className={styles.standardTable}>
      /* ****************Alert改动***************** */
        {alertPanel()}
     /* ****************Alert改动***************** */
        <Table
          loading={loading}
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default StandardTable;

使用组件时显示复选框和Alert组件

<StandardTable
  selectedRows={selectedRows}
  loading={loading}
  data={data}
  columns={columns}
  onSelectRow={this.handleSelectRows}
  onChange={this.handleStandardTableChange}
  rowSelect
  showAlert
/>

使用组件时不显示复选框和Alert组件

<StandardTable
  selectedRows={selectedRows}
  loading={loading}
  data={data}
  columns={columns}
  onSelectRow={this.handleSelectRows}
  onChange={this.handleStandardTableChange}
/>