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"
参考: