分页-组件

分页

<template>
	<div style="float:right">
		<el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageParams.page"
          :page-sizes="[3, 5, 10]"
          :page-size.sync="pageParams.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          >
        </el-pagination>
    </div>
</template>

<script>
export default {
	data () {
    	return {
    	// 分页数据
      pageParams: {
        page: 1,
        pagesize: 3
      },
      total: 0, // 数据数量
    	}
    },
    methods:{
    // ----------------------分页-----------------------
    // 会自动接收当前点击的每页的数量
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.pagesize = val // 修改传入接口的当前页参数
      this.pageParams.page = 1 // 回到首页重新渲染
      this.loadQuestions(true) // 重新渲染页面
    },
    // 会自动接收当前点击的页码
    handleCurrentChange (curPage) {
      console.log(`当前页: ${curPage}`)
      this.pageParams.page = curPage // 修改传入接口的当前页数
      this.loadQuestions(true) // 重新渲染页面
    }
}


}

</script>