站长说:本文代码可以借鉴,也方便扩展,比如再封装显示单选框还是复选框?
———————————————————–
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} />
原文出处:CSDN【棠鲤煎雪】
原文链接:https://blog.csdn.net/qq_34159310/article/details/80982031
本文观点不代表Dotnet9立场,转载请联系原作者。