el-pagination获取第几页
时间: 2023-09-09 16:10:39 浏览: 95
el-pagination 是 Element UI 框架中的分页组件,可以方便地实现前端的分页功能。要获取 el-pagination 组件当前显示的是第几页,你可以使用其中的 `current-change` 事件或者通过 `current-page` 属性来获取。
使用 `current-change` 事件的方式如下:
```html
<template>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:total="totalItems"
:page-size="pageSize">
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
totalItems: 100,
pageSize: 10
};
},
methods: {
handleCurrentChange(page) {
this.currentPage = page;
console.log('当前页码:', page);
}
}
};
</script>
```
使用 `current-page` 属性的方式如下:
```html
<template>
<el-pagination
v-model="currentPage"
:total="totalItems"
:page-size="pageSize">
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
totalItems: 100,
pageSize: 10
};
}
};
</script>
```
在上述代码中,`currentPage` 表示当前页码,可以通过这个变量获取 el-pagination 组件当前显示的是第几页。
阅读全文