基于antd pro editTable进行封装公共组件

组件封装

基于antd pro editTable进行封装公共组件

0.0版本，所有参数都由子组件进行传值，父组件作为接收，不做任何的处理。

实现表格高度自适应

/**
 * @description 公共table v0
 * @version: 2023-12-11 11:06:31
 */
import { setScrollY } from "@/utils";
import { EditableProTable } from "@ant-design/pro-table";

export default ({ ...resetProps }) => {
  const tableHeight = setScrollY(); //表格自适应高度
  return (
    <div>
      <EditableProTable
        {...resetProps}
        scroll={{ y: tableHeight ? tableHeight : 400 }}
      />
    </div>
  );
};

分析不足：

1. 增加的表格高度配置默认对所有组件都开放了（不符合组件封装规范，所有自定义配置都要支持关闭）
2. 在公共函数src\utils\index.ts中使用了hook：不符合hook使用规范。
3. 表格请求loadData很多页面是共性的，可以离到公共组件中。
4. 默认配置initTableConfig 可以抽离到公共组件中

1.0版本

WebTable1.0优化内容

(1)引入官方组件的类型属性
(2)将表格请求方法定义在父组件内，子组件只需要传输一个api将接口传到父组件进行执行搜索查询
(3)根据业务规则，需额外增加查询参数，增加transformRequest函数进行增加其他需要的参数传值
(4)将统一的参数值tableLoading、setTableLoading、initTableConfig（表格配置）、className（样式名）定义在父组件内

 import { setScrollY } from "@/utils";
import { EditableProTable } from "@ant-design/pro-table";
import * as Utils from "@/utils";
import { ProTableProps } from "@ant-design/pro-table";
import { useState } from "react";
import initTableConfig from "@/config/init-table-config";

interface resetPropsType extends ProTableProps<any, any> {
  // 其他自定义props...
  actionRef: any;
  api: any;//请求体
  rowKey?: string;
  maxLength?: number;//最大长度
  headerTitle?: string;//表格标题
  transformRequest?: (data: any, params?: any) => void;
}
export default ({
  api,//请求体
  rowKey = "id",//行key
  maxLength,//数据最大长度
  transformRequest,//参数请求修改
  ...resetProps//剩余属性
}: resetPropsType) => {
  const tableHeight = setScrollY(); //表格自适应高度
  const [config, setConfig] = useState(initTableConfig); // 表格配置
  const [tableLoading, setTableLoading] = useState<boolean>(false); //表格加载
  const requestData = async ({
    current: num,
    pageSize: size,
    ...resetQuestParams
  }) => {
   let obj = await Utils.RemoveSpaces({
      num,
      size,
      ...resetQuestParams,
    });
    setTableLoading(true);
    const res = await Utils.handleRes({
      api: api,
      data: transformRequest ? await transformRequest(obj) : obj,
    });
    setTableLoading(false);
    const configData = {
      ...config, // 使用展开运算符进行对象的浅拷贝
      tableData: res.datas,
      pagination: {
        ...config.pagination,
        total: res.total,
        current: num,
        pageSize: size,
      },
    };
    setConfig(configData);
    return {
      data: configData.tableData,
      success: true,
      total: configData.pagination.total,
    };
  };
  return (
    <div>
      <EditableProTable
        {...config}
        {...resetProps}
        className="comomTable"
        rowKey={rowKey}
        loading={tableLoading}
        request={requestData}
        scroll={{ y: tableHeight ? tableHeight : 400 }}
      />
    </div>
  );
};

不足：ts书写规范有待提高，代码进行优化，抽离公共函数

2.0版本

import { autoTableHight } from "@/utils";
import { EditableProTable } from "@ant-design/pro-table";
import { ProTableProps } from "@ant-design/pro-table";
import { useState } from "react";
import initTableConfig from "@/config/init-table-config";
import {useTableRequest} from "@/hooks/config/useTableRequest";

interface resetPropsType extends ProTableProps<any, any> {
  // 其他自定义props...
  actionRef: any;
  api: any; //请求体
  rowKey?: string;
  maxLength?: number; //最大长度
  headerTitle?: string; //表格标题
  transformRequest?: (data: any, params?: any) => void;
}
export default ({
  api, //请求体
  rowKey = "id", //行key
  maxLength, //数据最大长度
  transformRequest, //参数请求修改
  ...resetProps //剩余属性
}: resetPropsType) => {
  const tableHeight = autoTableHight(); //表格自适应高度
  const [config, setConfig] = useState(initTableConfig); // 表格配置
  const [tableLoading, setTableLoading] = useState<boolean>(false); //表格加载
  const tableRequest = useTableRequest({
    setTableLoading,
    setConfig,
    transformRequest,
    config,
    api,
    ...resetProps,
  });
   return (
    <div>
      <EditableProTable
        {...config}
        {...resetProps}
        className="comomTable"
        rowKey={rowKey}
         loading={tableLoading}
        request={tableRequest}
        scroll={{ y: tableHeight ? tableHeight : 400 }}
      />
    </div>
  );
};

//hooks
import { ProTable } from "@ant-design/pro-table";
import { useEffect, useState } from "react";
import * as Utils from "@/utils";

type TypeProps = {
  setTableLoading: (data: boolean) => void; //标题
  transformRequest?: (data: any) => void; //其他请求参数
  setConfig: (data: any) => void; //
  config: (data: any) => void;
  api: (data: any) => void; //请求体
};
//表格请求方法
export function useTableRequest({
  setTableLoading,
  api,
  transformRequest,
  config,
  setConfig,
  ...resetProps
}: TypeProps) {
 useEffect(() => {}, []);
  const requestData = async ({
    current: num,
    pageSize: size,
    ...resetQuestParams
  }) => {
    let obj = await Utils.RemoveSpaces({
      num,
      size,
      ...resetQuestParams,
    });
    setTableLoading(true);
    const res = await Utils.handleRes({
      api: api,
      data: transformRequest ? await transformRequest(obj) : obj,
    });
     setTableLoading(false);
    const configData = {
      ...config, // 使用展开运算符进行对象的浅拷贝
      tableData: res.datas,
      pagination: {
        ...config.pagination,
        total: res.total,
        current: num,
        pageSize: size,
      },
    };
    setConfig(configData);
    return {
      data: configData.tableData,
      success: true,
      total: configData.pagination.total,
    };
  };
  return requestData;
}

不足：业务逻辑简单，表格组件功能简单。代码书写不规范