前言
大家好 我是歌谣 我是一名坚持写博客四年的博主 最好的种树是十年前
其次是现在，今天继续对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表格是否渲染完成
演示结果
总结
歌谣出品 必是精品 微信公众号关注前端小歌谣 带你进入巅峰人才交流群
-
赞
-
收藏
-
评论
-
举报
上一篇：ant design upload实现多个文件一次上传(全网首发)
下一篇：前端小知识点扫盲笔记记录
相关文章
-
React+hook+ts+ant design封装一个table的组件
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析在前端项目中 最常见的就是封装一个table的一个功能功能思维初始化版本（基础样式和分页）
sed
分页
微信公众号
-
React+hook+ts+ant design封装一个input和select搜索的组件
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析首先 我们需要实现一个带有搜索功能的搜索框 本次只实现两种框的搜索功能 一种input 一种select功能思维第一步 初始版本先写出一个inp
html
搜索
重置
-
React+hook+ts+ant design封装一个具有动态表格得页面
前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析在前端项目中 最常见得是可以增加多个表格数据得一个表单功能思维首先需要通过数组遍历{data && data.map((item
数组
数组遍历
-
React封装强业务hook的一个例子
最近因为使用列表展示的需求有点多，就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook，也不能满足业务需要，于是就自己写了一个，支持本地分页筛选和接口分页筛选。 思路就是，筛选的字段都使用form表单控制，然后在hook里面将form和table联合起来。 下面贴出源码 u
taro
hapi
分页
搜索
字段
-
React+hook+ts+ant design封装一个具有编辑和新增功能的页面
需求分析 在前端项目中 最常见的就是做一个页面的
弹出框
微信公众号
输入设备
-
封装一个分页函数
常见的分页，也可以封装一个函数。需要的时候直接调用即可。
PHP
分页
-
React+Hook+ts+antDesign实现table行编辑功能
前言大家好 我是歌谣 今天要说的是ant design实现表格行编辑的功能 考虑问题的时候我们需要多看官方的api开发开始紧接着我们对照着api进行开发 首先加一个table
Data
数据
ide
-
基于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
初始化
数组
初始状态
-
使用Vue封装一个checkbox、checkboxGroup组件
checkbox.vue 组件
Vue
css
ide
-
使用React Hook一步步创建一个可排序表格组件
我花了一些精力来创作本文，以及熬夜编写本文的示例程序，以便您能在阅读之后可以实践参考，阅读后如果觉得对您有帮助，可以关注作者、收藏、转发和右下角点个“在看”，这是对作者写出优质文章最大的鼓励了。在本文中，我将创建一种可重用的方法来对 React 中的表格数据进行排序功能，并且使用React Hook的方式编写。我将详细介绍每个步骤，并在此过程中学习一系列有用的技术，如 useState、useMe
java
-
#yyds干货盘点 React+antDesign封装一个tab组件(类组件)
前言我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀"简单的父子组件父组件
数据格式
微信公众号
不执行
-
封装一个处理 react 异常的最简 ErrorBoundary 组件
前言 ???? ???? 从 React 16 开始，引入了 Error Boundaries 概念，它可以捕获它的子组件中产生的错误，记录错误日志，并展示降级内容，具体 官网地址。 ???? 错误边界避免一个组件错误导致整个页面白屏不能使用等情况，使用优雅降级的方式呈现备用的 UI，错误边界可以在渲染期间、生 ...
react
-
React高阶组件Hook
Hook是react16.8新增的，它可以让你在不编写class的情况下使用state以及其他react特性。Hook特点①使你在无需修改组件的情况下复用状态逻辑②可将组件中互相关联的部分拆分成更小的函数，复杂组件将更容易理解③更简洁，更容易理解的代码先来看个例子import React,{useState} from 'react'export function Hook(){...
React
ide
值传递
数组
复用
-
react——Table组件
/* * 构建数据列 * */ tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1'); console.log('group', group); return [{ title: '统计事项一级目录', dataIndex: ...
数据
二级
前端歌谣
分类列表
-
# 15篇
近期文章
-
1.55 openEuler搭建Mariadb数据库服务器-配置环境
-
2.纪录片|数学漫步之旅
-
3.BZOJ 1507 NOI2003 Editor Splay
-
4.BZOJ 3671 NOI2014 随机数生成器 贪心+暴力
-
5.BZOJ 2120 数颜色 暴力
文章目录
-
前言
-
封装准备（多看官网）
-
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
评论