vue element ui分页接口调试

<el-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

 这个是element ui 自带的分页，但是在实际应用的过程中并不是如此简单

这是我在项目中用到的分页，可以直接搬用

<template>
  <div>
    <el-pagination
      :page-size="pageSize"
      layout="prev, pager, next"
      :current-page="currentPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // pageSize代表每页显示的数目
      pageSize: 10,
      // currentPage代表当面的页数
      currentPage: 1,
      // totalCount列表的总数
      totalCount: 10
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 这里是查询列表的方法
    },
    // pageSize 改变时会触发的事件
    handleSizeChange (val) {
      this.pageSize = val
      // 当pageSize发生变化后需重新查询列表
      this.init()
    },
    // currentPage 改变时会触发
    handleCurrentChange (val) {
      this.currentPage = val
      // 当currentPage发生变化后需重新查询列表
      this.init()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

当然，data中每页显示的数目是因地方而异的，但是一般都是10

这里需要注意的是当 当前页数发生变化的时候需要重新调用查询接口，在每页显示的数目发生变化的时候也需要重新调用查询接口

还有一个需要注意的点是：init方法是查询列表的方法，在这里会调用接口，会获取到需要分页的数据的总数，切记数据的总数一定要赋值给totalCount， 以此来限制分页的最大页面数

分享就到这里啦，还有其他的问题可以评论一起交流呀~