elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/pagination

1、分页组件不显示

排查方法：

打印一下数据是否正常：

有没有列表数据？

有多少条数据？

hide-on-single-page

看看有没有设置:hide-on-single-page="true"？

如果设置了这个参数。那如果total只有一页时。分页组件就会不显示

如果设置的size是每页10条。但是在开发测试过程中。如果数据太少的话。就不太好测试这个分页，这样的话。可以修改page-sizes里的参数，比如：[1,2,5，10, 20, 30, 40, 50, 100]

 

2、某些参数不对时

可以检查一下参数类型对不对？比如total要是数字类型。

 

3，分页器失效

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

把我们需要的每页多少条参数写进sizes数组里面即可：:page-sizes="[1,10,30,50]"

4，修改current-page后，视图上还是没改变

:current-page.sync="current"
增加一个.sync这样会生效

5，把分页组件单独写成一个子组件时。传值问题

current-page 是一个 v-model， 翻页的时候组件会直接修改current的值，而你的current是props，vue又不允许修改，所以就存在这个警告了。

你把current定义到当前组件即可， 如果父组件需要这个值，你可以通过emit传递过去

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "current"

参考：

https://segmentfault.com/q/1010000041412162?_ea=208259194https://segmentfault.com/q/1010000041412162?_ea=208259194