element-Pagination 分页

<template>
  <div>
  <el-pagination
    layout="sizes,prev,pager,next,jumper,->,total"
    :total="50"
    :current-page.sync="currentPage"
    :pager-count="pagerCount"
    :page-size.sync="pageSize"
    :page-sizes.sync="pageSizes"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background>
  </el-pagination>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  pagerCount:9,
  data() {
    return {
      pagerCount:9,
      pageSize:20,
      pageSizes:[2,5,10,30],
      currentPage:5,
      
    };
  },
  methods: {
      handleSizeChange(size){
          alert(size);
      },
      handleCurrentChange(current){
          alert(current);
      }
  }
};
</script>

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

</style>