ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）

最新推荐文章于 2024-07-05 10:53:38 发布

roury

最新推荐文章于 2024-07-05 10:53:38 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：系统学习学习小功能

本文链接：https://blog.youkuaiyun.com/roury/article/details/94453675

本文介绍了如何在Ant Design的Table组件中实现分页功能，包括点击跳页、输入跳页以及自定义每页项目数。通过设置Table组件的pagination属性，并详细讲解了状态管理中的注意事项，如在state中定义pagination的延迟问题。同时，强调了当前页(current)赋值的顺序和布局的重要性。参考链接提供了一个详细的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过这个，对组件的之间的套用，多了一些了解。不再是单纯的，复制提供的组件代码，而是通过属性赋值，将多个组件功能同时实现。
1.实现原理：主要应用的还是Table，通过对Table属性pagination的设置，实现指定功能。
2.逻辑：定义pagination键值对，初始化相关属性，可以在state中定义，也可以直接定义。
需要注意的是，在state中定义时，需要在state外单独定义，current对应的变量，因为state设置变量有延迟，可能没法及时赋值实现跳页。（最好有个小模拟，观察在state内外的区别）

//state外定义cur表示当前显示页面
var cur=1;

//state内定义pagination的属性值
indexTable:{
   
   
	pagination:{
   
   
		//每页3条项目
		pageSize:

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

roury

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery Mobile 入门，想学web开发

m0_v648374的博客

03-17

905

其他知识点面试webpack的原理webpack的loader和plugin的区别？怎么使用webpack对项目进行优化?防抖、节流浏览器的缓存机制描述一下二叉树, 并说明二叉树的几种遍历方式?项目类问题技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

ant design的table组件实现全选功能以及自定义分页

01-18

我就废话不多说了，大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.state = { visible: false, indeterminate: tru

参与评论您还未登录，请先登录后发表或查看评论

ant design table表格分页

sccscswwe的博客

12-08

713

同志们是不是发现有时候自己设置了分页，虽然分页显示出来了，但是在mounted或者任何时候给分页页数赋值的时候赋值不上去，虽然不应想传值。当你点击自定义的刷新按钮，将分页改回第一页，数据改回了第一页，但是触发状态还是第二页。但是有一个问题，比如你选择了第二页，现在的触发状态是第二页，数据也是第二页。你的分页字段一定要写他规定的！

ant design的Table分页

weixin_44671867的博客

06-11

4067

页面Welcome.jsx 错误代码显示 import React from 'react'; import { Table, Input } from 'antd'; const { Search } = Input; import moment from 'moment' export default class Welcome extends React.Component{ constructor(props){ super(props); let format = 'YYY

ant-design table 分页（tableProps）

weixin_33850890的博客

09-26

3798

1.布局 <Table dataSource={this.state.tableDetailList} scroll={{ y: '200px' }} style={{tableLayout: 'fixed'}} pagination={{ pageSize: 12 }} columns={columns1} rowKey={record => record....

Ant Design Vue表格（Table）及分页（Pagination ）使用

前端学习笔记

04-06

1万+

最近在写一个新项目，UI框架用的是，因为之前一直用的Element UI，没有用过这个组件库，没想到二者区别这么大，因此踩了不少坑，其中就有Table和Pagination，花了一会时间才弄明白，在此记录并分享一下此次经历。注意：是 Vue3 项目。

Ant design table组件分页用法

scorpioop_1120的博客

09-01

2049

ant design table组件分页用法

Vue Ant Design Vue table pagination - 表格分页 - 附完整示例

m0_48968874的博客

11-06

1696

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAn enterprise-class UI components based on Ant Design and Vuehttps://3x.antdv.com/components/pagination-cn/ 注：也可以在浏览器中使用和标签直接引入文件，并使用全局变量。Ant Design Vue — An enterprise

antd-table-分页

热门推荐

congxue666的博客

03-02

1万+

1.对pagination参数进行设置 const paginationProps = { current: pageNum, pageSize, // showTotal: () => ( // <span>总共{total}项</span> // ), total, onChange: page => handlePageChange(page), hideOnSinglePage: false,

antd table 分页

cxz

10-25

7853

4个步骤实现table的分页 table 参数设置 state = { pagination: { pageSize: 10 }, }; <Table rowKey={e => e.id} dataSource={this.state.list} columns={columns} ...

antd 表格组件table 添加分页跳转功能 react umi

山东理工1134

04-13

1877

效果展示代码 function showTotal(total: any) { return `Total ${total} items`; } <Table columns={columns} dataSource={dataSource} pagination={{pageSize: 6}} /> <Pagination showQuickJumper defau

【React】Ant Design -- Table分页功能实现

weixin_40874076的博客

07-05

1365

【代码】【React】Ant Design -- Table分页功能实现。

ant design 中的table中的分页

diyi0306的博客

09-29

1886

<Row> {base ? <Table columns={base.columns} dataSource={base.data} style={{ marginTop: 10 }} pagination={{ simple:false, current:basePagination....

ant design vue table分页

尽力而行

03-09

7551

ant design vue table分页设置 1、设置pagination <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination"> <a slot="action" href="javascript:;">查看</a> <img style="width:20px;heigth:20px

创新项目实训 —— Ant-Design分页

樱岛麻衣的博客

04-13

3868

分页使用一：根据页码和页面大小返回PageSize条数据该方法适用于数据量较大的情景，每次查询根据PageSize和PageNum查询数据并返回前端。在频繁适用时，触发多次访问数据库，效率较低。项目使用场景：专利检索数据量：20万条 <a-pagination v-if="patents.length !== 0" @change="handleCurrentChange" :current="currentPa

AntDesign前端分页

fhdjdfhjd的博客

03-18

1163

AntDesign前端分页

antd自定义分页器_ant design的table组件实现全选功能以及自定义分页

weixin_39939276的博客

12-19

2209

我就废话不多说了，大家还是直接看代码吧~ant design的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了import './index.scss';import React from 'react';import {Checkbox, Table, Popconfirm} from 'antd';class TestComponent extends Component {...

ant design vue实现表格分页（清晰、可直接拿走用）

weixin_61175223的博客

04-13

9567

<template> <div> <a-table ref="table" size="middle" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" @cha.

AntDesign table 行的多选（分页）以及控制某一行是否可选

pig_ning的博客

04-16

1026

AntDesign table 行的多选（分页）以及控制某一行是否可选

ant-design-vue的table组件实现跨页选择

最新发布

01-07

### 使用 `ant-design-vue` 的 Table 组件实现跨页选择功能为了实现在不同页面之间保持已选中的行的功能，可以利用 Vue.js 的状态管理机制来保存所选行的数据源键值。当用户翻页时，这些选定项不会丢失。 #### 安装并配置 Ant Design Vue 首先确保已经安装了 `ant-design-vue` 库[^2]： ```bash npm install ant-design-vue ``` 接着，在项目入口文件中引入必要的样式和组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // Import the entire library and its CSS file. import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` #### 创建带有跨页选择功能的表格定义一个包含分页器以及多选框的表格实例，并通过 Vuex 或者简单的响应式变量存储被选中的记录 ID 列表[^1][^3]。以下是具体的代码示例： ```html <template> <div id="components-table-demo-row-selection">  <a-table :columns="columns" :data-source="filteredData" rowKey="key" :pagination="pagination" @change="handleTableChange" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" />  <p style="margin-top: 20px;"> Selected Row Keys: {{ selectedRowKeys }} </p> </div> </template> <script> export default { data() { return { columns: [ // 定义列... ], dataSource: [], // 数据源数组 filteredData: [], // 当前显示的数据子集 pagination: {}, // 分页参数对象 selectedRowKeys: [] // 已经选中的行 key 数组 }; }, methods: { handleTableChange(pagination) { this.pagination.current = pagination.current; const start = (this.pagination.current - 1) * this.pagination.pageSize; const end = start + this.pagination.pageSize; this.filteredData = this.dataSource.slice(start, end); console.log(`Current Page ${this.pagination.current}, Size per page ${this.pagination.pageSize}`); }, onSelectChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys; } }, mounted() { // 初始化数据源和其他属性... // 设置初始分页信息 this.pagination = { current: 1, pageSize: 5, total: this.dataSource.length }; // 加载第一页的数据 this.handleTableChange(this.pagination); } }; </script> ``` 在这个例子中，每当用户改变页面或调整每页大小时都会触发 `handleTableChange()` 方法更新 `filteredData` 属性；而当选取某一行或多行时则会调用 `onSelectChange()` 来同步最新的选取情况到 `selectedRowKeys` 中。