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

拼搏现实的明天。 2021-07-25 16:39 3005阅读 0赞

问题情况如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
分页器中页数显示 1条/页，但是表格中数据有5条。这个分页器失效了嘛？

代码奉上：

`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(){ 
    		//调用接口获取数据
    	}
    }

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

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

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

![在这里插入图片描述][20200723101406250.png]  
页面初始化时，pagesize是10，但是page-sizes的数组中没有这个10，就会出现分页器失效的问题。

如果改成一下：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

搞定！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/47ea9d6ad7354feaa9038d2db523b3f6.png
[20200723101406250.png]: /images/20210725/3b4c2ed2ff2a4b82b91bb1dc62d11b22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/8b51163de9154dc7884d590d4c7a7072.png