<el-pagination>组件动态设置currentPage
时间: 2023-12-31 19:06:56 浏览: 71
启动页动态配置
您可以使用`v-model`指令来动态设置`<el-pagination>`组件的当前页数。首先,您需要在父组件中定义一个`currentPage`变量,然后将其绑定到`<el-pagination>`组件的`current-page`属性上。这样,当您改变`currentPage`变量的值时,就会自动更新`<el-pagination>`组件的当前页数。
以下是一个示例代码:
```html
<template>
<div>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
totalItems: 100
};
},
methods: {
handleCurrentChange(currentPage) {
// 处理页码变化的逻辑
this.currentPage = currentPage;
// 执行其他操作...
}
}
};
</script>
```
在上述示例中,`currentPage`变量初始化为1,`pageSize`表示每页显示的项数,`totalItems`表示总共的项数。当用户点击页码或者通过其他方式改变当前页数时,会触发`handleCurrentChange`方法,您可以在该方法中处理页码变化的逻辑,并更新`currentPage`变量的值。
希望对您有所帮助!如果还有其他问题,请随时提问。
阅读全文