Vue —— 分页

<template>
  <div>
    ......

    <!--分页器 pager-count:可点击按钮个数，如果 9 ，连续页码就是 9-2=7 -->
    <el-pagination style="text-align: center" prev-text="上一页" next-text="下一页"
                   background
                   :current-page="currentPage"
                   :total="total"
                   :page-size="limit"
                   :pager-count="pagerCount"
                   :page-sizes="pageSizes"
                   layout="  prev, pager, next, jumper,->,sizes,total"
                   @size-change="handleSizeChange"
                   @current-change="获取数据的方法()"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Sku',
  data(){
    return{
      //分页器数据
      currentPage:1,
      total:0,
      limit:5,
      pagerCount:7,
      pageSizes:[3,5,7],
    }
  },
  
  methods:{
    // 获取品牌列表数据
    async 获取数据的方法(pager=1){
    	//清理数据
      // 分页
      this.currentPage = pager;
      // 发请求，必须带两个参数，page和limit
      const { currentPage, limit} = this;
      //发请求
      let result = await xxxx(currentPage,limit);
      if(result.code === 200){
        this.total = result.data.total;
        //把数据存放在data中
      }
    },
    // 改变每页条数
    handleSizeChange(limiter){
      this.limit = limiter;
      //发请求
      this.xxx(this.currentPage)
    },
  }
}
</script>