table 在中台系统是最常见的功能,在开发前习惯了先分析整个系统将公共能大量复用的功能先封装,方便开发提高开发效率,也可以有更多的时间让下面的小伙伴摸鱼学习。。。
本月出要启动一个新系统开发。分析了整个系统现对table e二次封装
table 组件二次封装
import { Table } from 'antd';
import React, { useState } from 'react';
//interface 这个是个好东西,为了保证组件的在他人使用减少出错,做必传,类型检验
interface Props {
listVal: any;
pageNumber: number;
pageSize: number;
total: number;
formVal?: any;
onListVal: Function;
loading: boolean;
columns: any;
onSelectChangeVal?: Function;
rowSelectionBool: Boolean;
paginationBool: Boolean;
}
const App = (props: Props) => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
props.onSelectChangeVal(newSelectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
// 分页
const onPaginationChange = (e) => {
props.onListVal(props?.formVal, e);
};
return (
<div>
<Table
rowKey={(record, index) => index}
rowSelection={props?.rowSelectionBool && rowSelection}// 是否开启复选框
columns={props?.columns}
dataSource={props?.listVal}
loading={props?.loading}
pagination={ // props?.paginationBool是否有分页
props?.paginationBool && {
simple: false,
defaultCurrent: 1,
current: props?.pageNumber,
defaultPageSize: props?.pageSize,
showSizeChanger: false,
total: props?.total,
onChange: (e) => onPaginationChange(e),
}
}
/>
</div>
);
};
export default App;
使用。我在modal中使用,UI 如下,这个弹框也是组件此处不做展开
// 分享
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useState,
} from 'react';
import {
Button,
Col,
Form,
Input,
InputNumber,
message,
Modal,
Row,
Table,
} from 'antd';
import { SaveUserApply } from '@/app/requestApi';
import PublicTable from '@/components/table';
interface Props {
onPaginationChange?: Function;
}
const ShareModal = forwardRef((props: Props, ref) => {
const layout = {
labelCol: { span: 5 },
wrapperCol: { span: 18 },
};
const [form] = Form.useForm();
const [isModalOpen, setIsModalOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [formVal, setFormVal] = useState();
const [listVal, setListVal] = useState();
const [loading, setLoading] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [targetData, setTargetData] = useState<any>({
pageNumber: 1,
pageSize: 8,
total: null,
});
const columns: any = [
{
title: '序号',
dataIndex: 'name',
},
{
title: '客户编号',
dataIndex: 'age',
},
{
title: '客户名称',
dataIndex: 'address',
},
];
const data: any[] = [];
for (let i = 0; i < 5; i++) {
data.push({
id: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
// 打开弹框
useImperativeHandle(ref, () => ({
// 就是暴露给父组件的方法
onSetIsModalOpen,
}));
const onSetIsModalOpen = (val) => {
setIsModalOpen(true);
};
// 弹框
const handleOk = async () => {
handleCancel();
};
// 返回
const handleCancel = () => {
setIsModalOpen(false);
};
// Submit
const onFinish = (values: any) => {
console.log('Received values from form: ', values);
// setFormVal(values);
onListVal(values, targetData.pageNumber);
};
// 获取列表
const onListVal = (val, value) => {
setFormVal(val);
setLoading(true);
let son = JSON.parse(JSON.stringify(targetData));
let pageNumberVal = value ? value : targetData.pageNumber;
if (value) {
son.pageNumber = Number(value);
}
};
// 选中
const onSelectChangeVal = (val) => {
console.log(val);
setSelectedRowKeys(val);
};
return (
<>
<Modal
width={540}
title="分享"
visible={isModalOpen}
// onOk={handleOk}
onCancel={handleCancel}
confirmLoading={confirmLoading}
footer={false}
>
<div>
<Form
name="customized_form_controls"
layout="inline"
onFinish={onFinish}
>
<Col span={20}>
<Form.Item name="price">
<Input allowClear placeholder="请输入客户关键字搜索" />
</Form.Item>
</Col>
<Col span={2} style={{ marginLeft: '-1.7%' }}>
<Form.Item>
<Button className="buttom" type="primary" htmlType="submit">
搜索
</Button>
</Form.Item>
</Col>
</Form>
<div style={{ marginTop: '10px' }}>
// TODO 表格
<PublicTable
columns={columns}
pageNumber={targetData.pageNumber}
pageSize={targetData.pageSize}
total={targetData.total}
listVal={data} // 待改
formVal={formVal}
onListVal={onListVal}
onSelectChangeVal={onSelectChangeVal}
loading={loading}
rowSelectionBool={true} // 控制复选框
paginationBool={true} // 控制要不要分页
></PublicTable>
<Row justify="end" style={{ display: data ? 'flex' : 'none' }}>
<Button
className="buttom"
htmlType="submit"
onClick={handleCancel}
style={{ marginRight: '10px' }}
>
返回
</Button>
<Button className="buttom" type="primary" onClick={handleOk}>
分享
</Button>
</Row>
</div>
</div>
</Modal>
</>
);
});
export default ShareModal;
这里只涉及到了父子,子父通信。。。
到最后请点赞关注!!!!