el-pagination的属性有哪些
时间: 2024-09-14 14:16:32 浏览: 50
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
5星 · 资源好评率100%
`el-pagination`组件具有多种属性,这些属性可以帮助你定制其行为和外观。以下是其中一些关键属性:
1. `current-page` (当前页数): 表示当前显示的数据集所在的页码。
```html
:current-page="currentPage"
```
2. `page-sizes` (可选的页面大小选项): 一个数组,定义了用户可以选择的不同页面大小。
```html
:page-sizes="pageSizes"
```
3. `page-size` (页面大小): 当前选择的页面大小,通常用户可以通过下拉框更改。
```html
:page-size="pageSize"
```
4. `layout` (布局模式): 定义分页组件的展示方式,如总页数、尺寸选择、箭头、跳转框等的位置。
```html
layout="total,sizes, prev, pager, next, jumper"
```
5. `total` (总记录数): 数据集的总条目数量。
```html
:total="total"
```
6. `@current-change` (事件处理器): 当当前页发生变化时触发,可以用来更新数据。
```html
@current-change="handleCurrentChange($event, getCategoryList)"
```
7. `@size-change` (事件处理器): 当页面大小变化时触发,可能影响到数据请求。
```html
@size-change="handleSizeChange($event, getCategoryList)"
```
8. `prev` 和 `next` (左右箭头): 控制翻页操作。
9. `jumper` (直接跳转框): 允许用户直接输入页码。
请注意,组件的样式默认由Element UI管理,但你可以通过`mixins`引入自定义样式或行为。在不需要父组件控制样式的情况下,确保在封装组件时保持原样设置。[^2]
阅读全文