当数据量过多时,使用分页分解数据。
设置layout
,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev
表示上一页,next
为下一页,pager
表示页码列表,除此以外还提供了jumper
和total
,size
和特殊的布局符号->
,->
后的元素会靠右显示,jumper
表示跳页元素,total
表示显示页码总数,size
用于设置每页显示的页码数量。
1.带有背景色的分页
设置background
属性可以为分页按钮添加背景色。
2.小型分页
在空间有限的情况下,可以使用简单的小型分页。
只需要一个small
属性,它接受一个Boolean
,默认为false
,设为true
即可启用。
3.附加功能
根据场景需要,可以添加其他功能模块。
此例是一个完整的用例,使用了size-change
和current-change
事件来处理页码大小和当前页变动时候触发的事件。page-sizes
接受一个整型数组,数组元素为展示的选择每页显示个数的选项,[100, 200, 300, 400]
表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~