elementui 分页el-pagination遇到的所有坑(current失效、分页组件不显示、视图不改变等)
2023-09-14 09:04:06 时间
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"
参考:
相关文章
- Vue组件
- 基于CAP组件实现补偿事务与消息幂等性
- 【说站】mysql服务器端的组件
- 逐步拆解React组件—Swipe轮播图
- 程序员都应该懂Kubernetes的基本概念和关键组件是什么吗?
- vue使用elementUI组件提交表单(带图片)到node后台
- (简易)测试数据构造平台:40 - 复杂工具(数据库组件)
- 【踩坑】ElementUi中form组件的一些“坑”(注意事项or巧妙用法)
- React源码学习入门(十一)React组件更新流程详解
- Vue 组件介绍及使用
- 微服务容错组件Hystrix设计分析
- OpenStack nova组件
- 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
- Facebook 开源的一组 Linux 内核组件与工具
- asp.net不用组件的URL重写(适用于较大型项目)
- ASPwsImage组件添加水印的实用代码
- jQuery之自动完成组件的深入解析