首页 > 其他分享 >封装一个useTable 内置分页 条件变换查询

封装一个useTable 内置分页 条件变换查询

时间:2023-08-11 15:55:24浏览次数:42  
标签:内置 const string pageSize number draft 封装 page useTable

import { Table } from 'antd';
import { useImmer } from 'common/hooks/useImmer';
import { get } from 'utils/request';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { useState } from 'react';
import { AnyObject } from 'antd/es/_util/type';

interface Params {
  page?: number;
  pageSize?: number;
}
interface EasyTableProps<T, U> {
  url: string;
  columns: ColumnsType<U>;
  rowKey: string;
  callback: () => T;
  withoutPagination?: boolean | undefined;
}
type Res = { pageInfo: { totalItem: number }; list: [] };
const Index = <T, U extends AnyObject>(props: EasyTableProps<T, U>) => {
  const { url, columns, rowKey, callback, withoutPagination } = props;
  const [pag, setPag] = useImmer({
    page: 1,
    pageSize: 10,
  });
  const [loading, setLoading] = useState(false);
  const [tableInfo, setTableInfo] = useImmer({ dataSource: [], total: 0 });
  const updateList = (params: Params) => {
    const page = params.page ? params.page - 1 : 0;
    const pageSize = params.pageSize ? params.pageSize : 10;
    if (!params.page) {
      setPag((item) => {
        item.page = 1;
        item.pageSize = 10;
      });
    }
    const paramData = {};
    Object.assign(paramData, { page, pageSize }, { ...callback() });
    setLoading(true);
    get(url, paramData)
      .then((res: { data: Res }) => {
        if (withoutPagination && Array.isArray(res)) {
          setTableInfo((draft) => {
            draft.total = res.length;
            draft.dataSource = res as unknown as [];
          });
        } else {
          setTableInfo((draft) => {
            draft.total = res.data.pageInfo.totalItem;
            draft.dataSource = res.data.list;
          });
        }
      })
      .finally(() => {
        setLoading(false);
      });
  };
  const onChange = (page: number, pageSize: number) => {
    if (pageSize !== pag.pageSize) {
      page = 1;
    }
    setPag((draft) => {
      draft.page = page;
      draft.pageSize = pageSize;
    });
    updateList({ page: page, pageSize: pageSize });
  };
  const pagination = {
    total: tableInfo.total,
    current: pag.page,
    pageSize: pag.pageSize,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [10, 20, 50, 100],
    showTotal: (num: number) => `共 ${num} 条`,
    onChange: onChange,
    position: ['bottomCenter'],
  } as TablePaginationConfig;
  const EasyTable = () => (
    <Table
      columns={columns}
      rowKey={rowKey}
      loading={loading}
      dataSource={tableInfo.dataSource}
      pagination={!withoutPagination ? pagination : false}
    />
  );
  return [EasyTable, updateList];
};
export default Index;

 2023-08.11

有关columns:ColumnsType<MsgTable>

ColumnsType其实是import { ColumnsType } from 'antd/es/table';

export interface MsgTable { topic: string; queueId: string; brokerName: string; storeSize: number; bornHost: string; storeTime: number; storeHost: string; bornTime: number; messageId: string; keys: string; traceId: string; spanId: string; } 具体泛型依据你表格列名而来 注意⚠️:但是在之前antd 版本中table里面的columns有过ColumnsType<object>时候被我赶上用了

标签:内置,const,string,pageSize,number,draft,封装,page,useTable
From: https://www.cnblogs.com/MDGE/p/17623181.html

相关文章

  • 简单介绍LiveData、ViewModel以及使用二者封装一个简单的基类用于测试
    一、概述1.LiveData概述什么事LiveData?1.LiveData是一种可观察的数据存储器类2.LiveData是一个数据持有者,给源数据包装一层。3.源数据使用LiveData包装后,可以被observer观察,数据有更新时observer可感知。4.但observer的感知,只发生在(Activity/Fragment......
  • Vue 内置指令
       示例:<template><span><divid="app"v-cloak>{{msg}}<br>{{obj.name}}<br>{{f1()}}<br>{{num>10?'大于10':'小于10'}}<br><spanv-text=&quo......
  • 对jdbctemplate的再次简单封装
    JdbcTemplateRepository.javaimportorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.jdbc.core.BatchPreparedStatementSetter;importorg.springframework.jdbc.core.Bea......
  • 【看表情包学Linux】系统下的文件操作 | 文件系统接口 | 系统调用与封装 | open,write
      ......
  • 用PHP封装一个强大且通用的cURL方法
    用PHP封装一个强大且通用的cURL方法。用PHP封装一个强大且通用的cURL方法。用PHP封装一个强大且通用的cURL方法。用PHP封装一个强大且通用的cURL方法。/***@function强大且通用的cURL请求库*@param$urlstring路径如:https://example.com......
  • loguru进一步封装解决打印日志定位异常问题
    importosimportsysimporttimefromloguruimportloggerimportinspectdefcreat_time_os():creat_time=time.strftime("%Y-%m-%d",time.localtime())sys.path.append(os.path.dirname(os.path.abspath(__file__)))log_path_dir=os.......
  • vue3 + ElementPlus 封装函数式弹窗组件
    需求场景:弹窗组件需要支持自定义的插槽内容,删除的弹窗也要使用这个组件,只是样式不一样而已,希望在父组件使用删除弹窗的时候直接调用某个方法就可以显示弹窗组件模拟cuDialog假设我的弹窗组件有以下的props和事件dialogVisible:控制弹窗显示和隐藏title:弹窗的标题showClose......
  • JavaSE--封装
    一、封装概念及作用1、封装  现实生活中很多都是封装的,例如手机、笔记本电脑......外部有一个壳子保护内部的部件,保证内部的部件是安全的  封装之后对于我们使用者来说不需要了解内部的结构和关心内部的复杂,只需要使用就可以2、封装的作用保证内部结构的安全屏蔽复杂,暴......
  • vue3 基于antd3.2.20封装表格(插槽)
    <!--表格组件--><a-table:dataSource="tableData":columns="columns":pagination="false":scroll="{y:tableHeight,x:1500}":rowKey="'id'">......
  • WEB自动化-框架-关键字封装
    所谓的关键字驱动,本质就是函数封装的过程。⾃动化当中的封装⽬的是:拆分重复的⾏为代码和测试数据,增加可维护性和复⽤性 对于某些用例都需要执行的功能,比如登陆、切换环境、登陆后进入大模块等。像这样的前置功能或者后置功能写到一个用例里面,其他用例就不能使用了。所以需要配......