element-ui 分页器失效问题处理

问题情况如下：

分页器中页数显示 1条/页，但是表格中数据有5条。这个分页器失效了嘛？

代码奉上：

<div class="pagination-container">
  <el-pagination
    :current-page.sync="listQuery.page"
    :page-sizes="[1,20,30,50]"
    :page-size.sync="listQuery.pageSize"
    :total="total"
    background
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>

script部分代码

data(){
	return{
		listQuery: {
        page: 1,
        pageSize: 10,
        param: {
          bannerName: undefined,
          bannerType: undefined
        }
      },
	}
}
methods:{
	handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getPage();
    },
    getPage(){
		//调用接口获取数据
	}
}

跟官网中分页器的使用，感觉没啥问题，但是就是出现上图中的问题。分页器失效了？？？

饿了么团队不应该会出现这种问题的。。。

检索了一番，终于被我发现了问题所在：

页面初始化时，pagesize是10，但是page-sizes的数组中没有这个10，就会出现分页器失效的问题。

如果改成一下：

<div class="pagination-container">
  <el-pagination
    :current-page.sync="listQuery.page"
    :page-sizes="[1,10,30,50]"
    :page-size.sync="listQuery.pageSize"
    :total="total"
    background
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>

效果如下：

搞定！

本文地址：https://blog.csdn.net/yehaocheng520/article/details/107530139