ant design pro默认分页显示修改

电玩女神 2022-12-28 04:19 277阅读 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 条评论，277人围观）

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

相关阅读

相关 Ant Design Pro入门

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

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

相关 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 赞/ 30 阅读

相关 Ant Design Pro Vue使用心得

[https://blog.csdn.net/m0\_37938910/article/details/93318440][https_blog.csdn.net_m0_379

你的名字/ 2023年06月27日 05:38/ 0 赞/ 21 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 ant design pro 前端框架

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

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

相关 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 赞/ 282 阅读

相关 ant-design table 分页（tableProps）

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

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