elementui分页
1、data中声明分页所需数据:
queryInfo: { total: 0, query: '', currentPage: 1, // 当前页数 pageSize: 10 // 当前每页显示多少条数据 }
2、引入分页组件:
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total" ></el-pagination>
3、请求事件中将queryInfo中的currentPage和pageSize作为请求参数,请求成功后将total赋给分页中的total:
async getDatasummaryList() { let data = { dependentId: this.fileType, fileName: this.fileName, hospitalId: hospitalId(), page: this.queryInfo.currentPage, size: this.queryInfo.pageSize } let res = await datasummaryListApi(data) if (res.state === 200) { this.tableData = res.results.records this.queryInfo.total = res.results.total } }
4、分页的两个事件,将数据赋值好后重新触发请求:
handleSizeChange(pageSize) { this.queryInfo.pageSize = pageSize this.getDatasummaryList() }, handleCurrentChange(currentPage) { this.queryInfo.currentPage = currentPage this.getDatasummaryList() }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结