Pagination 分页
优质
小牛编辑
126浏览
2023-12-01
当数据量过多时,使用分页分解数据。
基础用法
属性 layout
共有 6 个参数,分别代表不同子组件 (功能),只有声明需要时这些子组件才会显示。
prev
表示上一页, next
为下一页, pager
表示页码列表。
除此以外还提供了 jumper
和 total
, size
。
jumper
表示跳页元素, total
表示显示页码总数, size
用于设置每页显示的页码数量。
设置 layout
, 表示需要显示的内容,用逗号分隔,布局元素会依次显示。
<div class="pagination-demo"> <div class="block"> <span class="demonstration">页数较少时的效果</span> <el-pagination [total]="50" [layout]="['prev', 'pager', 'next']" notes=" "> </el-pagination> </div> <div class="block"> <span class="demonstration">大于 7 页时的效果</span> <el-pagination [total]="200" [layout]="['prev', 'pager', 'next']" notes=" "> </el-pagination> </div> </div>
小型分页
在空间有限的情况下,可以使用简单的小型分页。
<el-pagination [total]="50" [small]="true"> </el-pagination>
附加功能
根据场景需要,可以添加其他功能模块。
当你打开自由控制分页数量参数 size
时,你可以使用 page-sizes
来调整具体的选项,详见文末的属性表。
<ul class="list"> <li> <span>显示总数</span> <el-pagination [total]="50" [layout]="['prev', 'pager', 'next', 'total']" notes=" "> </el-pagination> </li> <li> <span>调整每页显示条数</span> <el-pagination [total]="500" [page-size]="20" [layout]="['prev', 'pager', 'next', 'size']" notes=" "> </el-pagination> </li> <li> <span>直接前往</span> <el-pagination [total]="500" [layout]="['prev', 'pager', 'next', 'jumper']" notes=" "> </el-pagination> </li> <li> <span>完整功能</span> <el-pagination [total]="40" [layout]="['prev', 'pager', 'next', 'jumper', 'size', 'total']" notes=" "> </el-pagination> </li> </ul>
Pagination Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model | 当前页码,双向绑定值,你也可以通过 (modelChange) 单独捕获事件 | number | ||
small | 是否使用小型分页样式 | boolean | ||
page-size | 每页显示条目个数 | number | 10 | |
total | 总条目数,与 page-count 之间至少填写一个,建议你总是携带 total | number | ||
page-count | 总页数 | number | ||
layout | 组件布局,需要的子组件名 | Array | Array | Array |
page-sizes | 每页显示个数选择器的选项设置,作用于子组件 size | Array | Array |