表格封装

表格封装

import React from 'react';
import {Table} from 'antd';
import styles from './style.less';
import {TableProps} from 'antd/es/table';
//FC是Function Component** 的缩写
//如果你不使用 `TableProps`，可以直接将 `props` 作为一个普通的对象传入。这种方式不涉及类型约束，因此你不会得到 TypeScript 对属性类型的检查，也不会有代码补全的功能。
const GlobalTable: React.FC<TableProps<any>> = props => {
        const {pagination, ...otherProps} = props
        return (
                                        <div className={styles['global-table']}>
                                                <Table
                                                                                size='middle'
                                                                                rowClassName={((record, index) => index % 2 !== 0 ? styles['global-table-cell-odd'] : styles['global-table-cell-even'])}
                                                                                pagination={pagination === false ? pagination : {...pagination, size: 'small'}}
                                                                                {...otherProps} />
                                        </div>
        );
};
export default GlobalTable;

父组件使用

 		let columns = [{
		title: '存单号',
		dataIndex: 'depositReceiptNo',
		align: 'center'
	},
	{
		title: '到期日期',
		dataIndex: 'matureDate',
		align: 'center',
	},{
		title:'编辑',
		align:'center',
		render:(row)=>(<div>
			<div style={{fontSize:"40px",color:"red"}} onClick={()=>this.btnEit(row)}>点击一下</div>
		</div>)
	}]
            
            //list是返回数据
            let list=[
                {
                    depositReceiptNo:"",
                    matureDate:""
                }
            ]
            
            					<GlobalTable
					dataSource={list}
					rowKey="accoAcctNo"
					pagination={false}
					columns={columns}
				/>