zoukankan      html  css  js  c++  java
  • 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()
        }
  • 相关阅读:
    KindEditor
    JS缺失错误- Uncaught SyntaxError: Unexpected token <
    JS
    SQL
    Bootstrap
    CSS-筛选 获取第一个td
    订单号创建并发问题
    保存对象时碰到的问题-列名 'Discriminator' 无效
    ViewBag对象的更改
    Kafka协议兼容性改进
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12981960.html
Copyright © 2011-2022 走看看