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}
/>