前言
大家好 我是歌谣 我是一名坚持写博客四年的博主 最好的种树是十年前
其次是现在，今天继续对ant design table的分页封装进行讲解
封装准备（多看官网）
jsx风格的api
columns={columns} dataSource={data} />
/* 使用 JSX 风格的 API */
dataSource={data}>
key="name" title="Name" dataIndex="name" />
>
模拟jsx的api结构
{...resetProps}
onChange={onTableChange}
dataSource={list}
rowKey={record => `${record.id}`}
pagination={{
pageSizeOptions: ['5', '10', '20', '50'],
...pagination,
total: page.dataTotal,
showTotal: () => {
return '共 ' + page.dataTotal + ' 条记录';
},
}}
>
{props.children}
分页参数官方api
`${range[0]}-${range[1]} of ${total} items`}
defaultPageSize={20}
defaultCurrent={1}
/>
解析
rowKey表示唯一标识 区当前行的idresetProps表示剩余参数
onTableChange回调 子传父
const onTableChange = useCallback((pageParams: PaginationProps) => {
setPagination(pageParams);
props.onChange(pageParams);
}, []);
把分页参数传给父级
ts限定
interface BaseTableProps extends TableProps {
data: {
list: T[];
page: PageResponseData;
};
children: React.ReactNode;
onChange: (page: PaginationProps) => void;
}
默认状态
const {
data: { list, page },
...resetProps
} = props;
const [pagination, setPagination] = useState({
defaultCurrent: 1,
defaultPageSize: 10,
showSizeChanger: true,
});
总体封装代码
import React, { useCallback, useState } from 'react';
import { Table,Card } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
import { TableProps } from 'antd/lib/table';
import { PageResponseData } from './type';
import {isHKCard} from "@/utils/regexp";
import { type } from 'os';
interface BaseTableProps extends TableProps {
data: {
list: T[];
page: PageResponseData;
};
children: React.ReactNode;
onChange: (page: PaginationProps) => void;
}
const BasicTable: React.FC = (props: BaseTableProps) =>{
// function BasicTable(props: BaseTableProps) {
const {
data: { list, page },
...resetProps
} = props;
const [pagination, setPagination] = useState({
defaultCurrent: 1,
defaultPageSize: 10,
showSizeChanger: true,
});
const onTableChange = useCallback((pageParams: PaginationProps) => {
setPagination(pageParams);
props.onChange(pageParams);
}, []);
return (
{...resetProps}
onChange={onTableChange}
dataSource={list}
rowKey={record => `${record.id}`}
pagination={{
pageSizeOptions: ['5', '10', '20', '50'],
...pagination,
total: page.dataTotal,
showTotal: () => {
return '共 ' + page.dataTotal + ' 条记录';
},
}}
>
{props.children}
);
}
export default BasicTable;
使用方法
title="设备类型" dataIndex="machineTypeName" align="center"
render={(text, record:any, index) => (
{record?.t_device_machine_type?.machine_type_name}
)}
>
title="设备名称" dataIndex="name" align="center">
title="设备编码" dataIndex="code" align="center">
title="添加时间"
dataIndex="register_date"
align="center"
render={(text, record, index) => (
{countFormat(text)}
)}
>
title="修改时间"
dataIndex="update_date"
align="center"
render={(text, record, index) => (
{countFormat(text)}
)}
>
title="操作"
align="center"
render={(text, record, index) => (
解析
子传父分页回调
const onTableChange = useCallback(({ current, pageSize }: PaginationProps) => {
setPage({ pageIndex: current as number, pageSize: pageSize as number });
}, []);
loading表格是否渲染完成
演示结果
总结
歌谣出品 必是精品 微信公众号关注前端小歌谣 带你进入巅峰人才交流群
-
赞
-
收藏
-
评论
-
举报
上一篇：React+Hook+ts+antDesign实现table行编辑功能
相关文章
-
React+hook+ts+ant design封装一个input和select搜索的组件
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析首先 我们需要实现一个带有搜索功能的搜索框 本次只实现两种框的搜索功能 一种input 一种select功能思维第一步 初始版本先写出一个in
搜索
html
重置
-
React+hook+ts+ant design封装一个具有编辑和新增功能的页面
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析在前端项目中 最常见的就是做一个页面的新增和编辑 通常一个页面就能够搞定功能思维这边的话需要做出一个弹出框的一个模式弹出框部分设计
弹出框
数据
-
React封装强业务hook的一个例子
最近因为使用列表展示的需求有点多，就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook，也不能满足业务需要，于是就自己写了一个，支持本地分页筛选和接口分页筛选。 思路就是，筛选的字段都使用form表单控制，然后在hook里面将form和table联合起来。 下面贴出源码 u
taro
hapi
分页
搜索
字段
-
React+Hook+ts+antDesign实现table行编辑功能
前言大家好 我是歌谣 今天要说的是ant design实现表格行编辑的功能 考虑问题的时候我们需要多看官方的api开发开始紧接着我们对照着api进行开发 首先加一个table
Data
数据
ide
-
封装一个分页函数
常见的分页，也可以封装一个函数。需要的时候直接调用即可。
PHP
分页
-
基于element-ui封装一个Table模板组件
大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuetify。这两个组件库都各有各的优点，但就table组件来说，我还是比较喜欢vuetify的实现，不用手写一个个column，只要传入headers的配置数组就行，甚至分页器都内置在了table组件里，用起来十分方便。
element-ui
Table
-
使用Vue封装一个switch组件
参数支持：一、switch组件基本框架和样式
vue.js
组件
input标签
改变颜色
css
-
使用Vue封装一个radio组件、RadioGroup组件
一、封装radio组件radio组件基本框架和样式：
Vue
radio
双向绑定
数据
点击事件
-
简单易懂的 React useState() Hook 指南（长文建议收藏）
作者：Dmitri Pavlutin译者：前端小智腾讯云最近在做活动，百款云产品低至 1 折，可以点击 阅读原文 进行参与状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件，因为它们足够简单，要使函数组件具有状态管理，可以useState() Hook。本文会逐步讲解如何使用useState() Hook。此外，还会介绍一些常见useStat
初始化
数组
初始状态
-
使用React Hook一步步创建一个可排序表格组件
我花了一些精力来创作本文，以及熬夜编写本文的示例程序，以便您能在阅读之后可以实践参考，阅读后如果觉得对您有帮助，可以关注作者、收藏、转发和右下角点个“在看”，这是对作者写出优质文章最大的鼓励了。在本文中，我将创建一种可重用的方法来对 React 中的表格数据进行排序功能，并且使用React Hook的方式编写。我将详细介绍每个步骤，并在此过程中学习一系列有用的技术，如 useState、useMe
java
-
使用Vue封装一个checkbox、checkboxGroup组件
checkbox.vue 组件
Vue
css
ide
-
#yyds干货盘点 React+antDesign封装一个tab组件(类组件)
前言我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀"简单的父子组件父组件
数据格式
微信公众号
不执行
-
React高阶组件Hook
Hook是react16.8新增的，它可以让你在不编写class的情况下使用state以及其他react特性。Hook特点①使你在无需修改组件的情况下复用状态逻辑②可将组件中互相关联的部分拆分成更小的函数，复杂组件将更容易理解③更简洁，更容易理解的代码先来看个例子import React,{useState} from 'react'export function Hook(){...
React
ide
值传递
数组
复用
-
封装一个处理 react 异常的最简 ErrorBoundary 组件
前言 ???? 从 React 16 开始，引入了 Error Boundaries 概念，它可以捕获它的子组件中产生的错误，记录错误日志，并展示降级内容，具体 官网地址。 ????错误边界避免一个组件错误导致整个页面白屏不能使用等情况，使用优雅降级的方式呈现备用的 UI，错误边界可以在渲染期间、生命周期和整个组件树的构造函数中捕获错误。自 React 16 起，任何未被错误边界捕获的错误将会导致
react
-
react——Table组件
/* * 构建数据列 * */ tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1'); console.log('group', group); return [{ title: '统计事项一级目录', dataIndex: ...
数据
二级
前端歌谣
分类列表
-
# 15篇
近期文章
-
1.星起航跨境：亚马逊跨境电商干货分享，有效增加产品曝光的方法
-
2.BZOJ 1355 Baltic2009 Radio Transmission KMP算法
-
3.恒创科技：如何区分香港轻量云服务器与香港云服务器（超详细对比）
-
4.POJ 2104 K-th Number 划分树
-
5.工单系统的作用有哪些？
文章目录
-
前言
-
封装准备（多看官网）
-
jsx风格的api
-
模拟jsx的api结构
-
分页参数官方api
-
解析
-
onTableChange回调 子传父
-
ts限定
-
默认状态
-
总体封装代码
-
使用方法
-
解析
-
演示结果
-
总结
-
-
新人福利
-
举报文章
请选择举报类型
内容侵权
涉嫌营销
内容抄袭
违法信息
其他
补充说明
0/200
上传截图
格式支持JPEG/PNG/JPG，图片不超过1.9M
![]()
-
赞
-
收藏
-
评论
如有误判或任何疑问，可联系 「51CTO博客客服 」申诉及反馈。
我知道了
51CTO首页
内容精选
博客
学堂
精培
企业培训
CTO训练营
智能汽车
开源基础软件社区
WOT全球技术创新大会 
公众号矩阵
移动端
51CTO
开源基础软件社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
开源基础软件社区订阅号
51CTO学堂APP
51CTO学堂企业版APP
开源基础软件社区视频号
51CTO博客
-
首页
- 关注
- 排行榜
-
订阅专栏
-
搜索历史
清空
热门搜索
查看【
】的结果
-
新人福利
写文章
- 创作中心
-
登录注册
Copyright © 2005-2023 51CTO.COM
版权所有 京ICP证060544号
- 关于我们
-
官方博客
全部文章
热门标签
班级博客
了解我们
在线客服
网站地图
意见反馈
- 友情链接
-
开源基础软件社区
51CTO学堂
51CTO
汽车开发者社区
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net
评论