ant design pro默认分页显示修改

电玩女神 2022-12-28 04:19 327阅读 0赞

**做表格分页的时候，使用的是ant design pro ，分页器是封装好的，但是公司要求要与之前的公司产品看齐，他们用的比较老，因此需要重写分页器（我的项目要修改的不多，只需要修改分页前面的显示文字就行），以下列出全部重写以及总数显示重写**

## 1、分页整体修改： ##

itemRender(page, type, originalElement) { 
                                    if (type === "page") { 
                                      return <a href={ `/galleries/${ page}`}>{ page}</a>;
                                    } else if (type === "prev") { 
                                      return <a href={ `/galleries/${ this.currentPage - 1}`}>上一页</a>;
                                    } else if (type === "next") { 
                                      return <a href={ `/galleries/${ this.currentPage + 1}`}>下一页</a>;
                                    }
                                  }

## 2、总数显示重写 ##

**2.1 ant design pro 默认是这样的：**

![在这里插入图片描述][20201214164106532.png]  
**2.2 但是公司之前的产品是这样的：**

![在这里插入图片描述][20201214164142330.png]  
**2.3 因此只需要修改前面的显示方式便可以了，重写代码：**

showTotal: total => {  return <span>共 <span className="pagination">{ total}</span> 条</span> },

**2.4 中间的显示样式：**

.pagination{ 
      color:rgb(24,144,244);
      font-weight: bold;
    }

**打完收工**

[20201214164106532.png]: /images/20221120/8b644a75b6344195b22b9a03db1c5a7b.png
[20201214164142330.png]: /images/20221120/d198ac38c6c8455a8f2d59fec7af1225.png

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ant Design Pro入门

目录一：了解Ant Design Pro 二：快速入门 -------------------- 一：了解Ant Design Pro Ant Design

小鱼儿/ 2024年03月30日 12:42/ 0 赞/ 205 阅读

相关 ant design pro修改默认端口号 Windows系统下或者Mac系统下的ant design pro修改默认端口号改变较高版本的ant design pro默认打开的端口号

文章目录问题分析问题解决问题 window系统下的问题解决 Mac系统下的问题解决修改`ant design pro

悠悠/ 2023年09月28日 19:20/ 0 赞/ 27 阅读

相关 Vue-Ant Design Pro of Vue

[https://blog.csdn.net/gu\_wen\_jie/article/details/90444161][https_blog.csdn.net_gu_wen

爱被打了一巴掌/ 2023年06月27日 05:39/ 0 赞/ 121 阅读

相关 Ant-Design-Pro of Vue （一）

安装 vue-cli yarn 安装 vue-cli 有些坑，在这记录下来官方安装方法 `yarn global add @vue/cli` 在之前先卸载旧

╰半橙微兮°/ 2023年01月03日 09:20/ 0 赞/ 288 阅读

相关 ant design pro,删除最后一页退回上一页

首先需要三个变量，分别是删除后的总数以及页码还有每页条数： var nowDatasSize: number = -1 var currentPag

短命女/ 2022年12月30日 03:45/ 0 赞/ 323 阅读

相关 ant design pro默认分页显示修改

做表格分页的时候，使用的是ant design pro ，分页器是封装好的，但是公司要求要与之前的公司产品看齐，他们用的比较老，因此需要重写分页器（我的项目要修改的不多，只需要

电玩女神/ 2022年12月28日 04:19/ 0 赞/ 328 阅读

相关 ant-design-vue-pro docker部署

ant-design-vue-pro docker部署 1、Dockerfile 在项目根路径下，内容： build stage FROM node:lt

悠悠/ 2022年11月05日 14:57/ 0 赞/ 354 阅读

相关 ant design pro 前端框架

ant design pro 框架官网地址：[https://pro.ant.design/docs/getting-started-cn][https_pro.ant.des

小咪咪/ 2022年04月08日 14:41/ 0 赞/ 587 阅读

相关 Vue-Ant Design Pro of Vue

Ant Design Pro of Vue 本来呢是想写一些关于[Ant Design Vue][]的文章，不过恰好用到了一个开源的基于Ant Design Vue 开发

雨点打透心脏的1/2处/ 2022年01月29日 15:55/ 0 赞/ 370 阅读

相关 ant-design table 分页（tableProps）

From: [https://www.cnblogs.com/crazycode2/p/9704382.html][https_www.cnblogs.com_crazycod

我就是我/ 2021年11月17日 08:58/ 0 赞/ 491 阅读