<template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.totalPages">
    </el-pagination>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      pagination:{
        currentPage: 1,
        pageSize: 2,
        totalPages: 4,
      }
    }
  },
  methods: {
    handleSizeChange(newSize){//控制每页的数据条数
      console.log(newSize)
      console.log(this.pagination.pageSize)
      this.pagination.pageSize=newSize

    },
    handleCurrentChange(newPage){//控制当前在哪一页
      console.log(newPage)
      console.log(this.pagination.currentPage)
      this.pagination.currentPage=newPage
    }

  }
}
</script>
<style scoped>

</style>