如何使用element-ui中的分页组件
分页组件里面的属性比较多,下面先看看官方给的都有哪些属性
@size-change="handleSizeChange"这个意思是监听pagesize每页显示多少条数据,在methods中进行函数定义
handleSizeChange(newSize){
// 将最新的页面条数传递到queryInfo中
this.queryInfo.pagesize=newSize
// 重新刷新渲染页面数据
this.getgoodsList()
}
queryInfo是data中定义的页面属性内容对象
@current-change="handleCurrentChange"当前的页码值,如果发生变化会触发该函数
:current-page="queryInfo.pagenum
"当前所渲染的页码,应当绑定到queryInfo中的pagenum上:page-sizes="[100, 200, 300, 400]"
表示每页可以展示多少条数据
:page-size="100"
表示当前每页展示多少条数据
layout="total, sizes, prev, pager, next, jumper"
表示组件需要哪些功能,不需要的功能把相应的英文删除就行
:total="total"
【如何使用element-ui中的分页组件】total应该绑定到data中当前的总数据条数
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 由浅入深理解AOP
- 如何寻找情感问答App的分析切入点
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- java中如何实现重建二叉树