antd Table 二次封装

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;

这里只涉及到了父子，子父通信。。。 

到最后请点赞关注！！！！