vue2分页

HTML

<!--下方分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

 参数

      pageNum: 1,

      pageSize: 5,

      currentPage: 1,

      total: 0,

放到查询的方法中

 pageNum: this.pageNum,

            pageSize: this.pageSize,

点击更换页面方法 

// 切换分页

    handleSizeChange(size) {

      this.pageSize = size

      this.fetchData(this.pageNum, size)

    },

    handleCurrentChange(pageNum) {

      this.pageNum = pageNum

      this.fetchData(pageNum, this.pageSize)

    },