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()
    }

 

posted @   吴小明-  阅读(605)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
点击右上角即可分享
微信分享提示