element ui分页器的使用

    <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page="pageInfo.page"
        @current-change="onPageChange"
        :total="totalElementsData">
      </el-pagination>

current-page表示的是当前的页数,就传data里面定义的就好,total表示的是总页数,current-change表示的是分页时候的事件

      pageInfo: {
          page: 1,
          size: 10,
      },
     totalElementsData:0,

    onPageChange (page) {
        this.pageInfo.page = page
        this.fetchData()   
     },

fetchData (data = {}) {
         this.listLoading = true
         setTimeout(() => {
            this.listLoading = false
         }, 20000)
         this.criteria.page = this.pageInfo.page
         this.criteria.size = this.pageInfo.size
         var { name,contact, createStart,createEnd, checkStart,checkEnd, status ,page, size} = this.criteria
         var params ={ name, contact, createStart, createEnd, checkStart, checkEnd, status,page, size}
         fetchBusiness.cashManageData(params).then(res => {
          this.loading = false
          if (res.status === 200) {
            this.listLoading = false
            this.getCashList = res.data.data.content
            this.totalElementsData = +res.data.data.totalElements   //这里获取totalElementsData数据
          } else {
            this.$message({
              message: res.data.message,
              duration: 3000
            })
          }
        })       
     },

转载于:https://www.cnblogs.com/antyhouse/p/10046128.html