首页 > 其他分享 >Vue3+antd实现分页功能

Vue3+antd实现分页功能

时间:2024-11-08 16:18:53浏览次数:4  
标签:const 分页 pageSize 条数 result Vue3 antd total ref

vue 中代码(在对应的地方添加)

<a-pagination 
                    v-model:current="current" 
                    :total="total" 
                    v-model:page-size="pageSize"
                    :showSizeChanger="true"
                    :hideOnSinglePage="true"
                    style="margin-top: 20px;text-align: right;"
                    @change="checkTotal"/>

 

在script中定义参数

const current = ref(1);//默认展示第几页
const total = ref(0);//总的条数
const pageSize = ref(10);//默认一页展示的条数
const userList = ref([]);//数据得list

 

翻页的change事件

const checkTotal = (page, pageSize) =>{getUserPageList({current:page,size:pageSize}).then((result)=>{
            userList.value = result.records
            total.value = result.total
        })
      }

 

标签:const,分页,pageSize,条数,result,Vue3,antd,total,ref
From: https://www.cnblogs.com/Fooo/p/18535346

相关文章

  • SqlServer 分页学习
    在B站上看到一个分页视频,老师讲的挺好,记录下来。想看原视频的可以去B站--1.建立Students表CREATETABLEstudents(IDINTPRIMARYKEYIDENTITY(1,2),NAMENVARCHAR(50)NOTNULL,SEXCHAR(6)CHECK(SEXIN('Male','Female')));GO--2.插入30条数据INSERTINTO......
  • Vue3+AntDesign后台管理系统 | 小蚂蚁云
      项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、AntDesign、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • 最全Vue3开源管理系统 | 小蚂蚁云
    框架ElementPlusAntDesignVueNaiveUIArcoDesign简介element-uiVue3版本AntDesign的Vue实现,组件的风格与AntDesign保持同步Vue作者推荐的Vue3ui组件库ArcoDesign主要服务于字节跳动旗下中后台产品的体验设计和技术实现社区活跃度高高中中实现方式单文件Vue单文......
  • Vue3+ElementPlus快速入门 | 小蚂蚁云
       项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技......
  • 36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇
    36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇36套eb前端全栈Vue3项目实战-入门篇+项目篇+进阶篇+架构篇,P7前端架构,高薪面试,Vue3源码剖析视频课程-技术栈-TypeScript+Vute+ElementPlus+Koa2+Node.js+Pinia+EChart4.0+Uni-App+React18+Flutter+Web3D+Vant+UI,项......
  • WebMagic抓取 table分页数据, table分页时,URL不变
    动态页面爬虫前的准备:https://www.cnblogs.com/maohuidong/p/18517953一:java添加maven依赖:<dependency><groupId>us.codecraft</groupId><artifactId>webmagic-core</artifactId><version>0.7.4</version></dependency>&......
  • Vue3 - 详细实现虚拟列表前端虚拟滚动列表解决方案,vue3长列表优化之虚拟列表,解决列表
    前言Vue2版本,请访问这篇文章在vue3项目开发中,详解实现虚拟列表高度不固定(不定高)且复杂含有图片视频等复杂虚拟列表教程,决列表每项高度不确定及img图像或视频的加载方案,利用缓冲区技术解决用户浏览时渲染不及时列表闪烁白屏/列表加载闪屏,解vue3实现虚拟列表优化大......
  • 基于 Go + Vue3!一款开源的 Nginx 管理 Web 工具!
    大家好,我是Java陈序员。Nginx由于其强大的性能,常常被用于企业开发中!今天,给大家介绍一款开源的Nginx管理Web工具,支持通过界面完成Nginx的配置!关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍NginxUI——一个......
  • 双token无感刷新nodejs+vue3(保姆级教程)
    什么是双Token无感刷新?双Token无感刷新机制使用两个不同的token来管理用户的身份验证和会话。通常情况下,这两个token是:访问Token(AccessToken):用于访问受保护的资源,通常具有较短的有效期(如15分钟到1小时)。当用户进行API请求时,附带此token以证明其身份。刷......
  • 如何使用mapbox实现楼层分层,即所谓的单体化;以及如何在vue3中使用mapbox
    我们在做webgis开发的过程中,应该经常会去加载一些类似白膜的数据,但是呢,如何实现对楼房分分层这个问题不知道大家有没有思考过,在cesium中是可以实现这个操作的,但是过程十分复杂繁琐;今天呢给大家介绍一种简单的,利用mapbox实现楼层分层单体化。先展示一下效果图初始状态鼠标经......