使用vue2和el-Pagination分页器,实现 一个功能,有在第三页 ,点击一个重置按钮,回到第一页,
时间: 2024-11-12 16:45:10 浏览: 16
在 Vue.js 中,你可以通过监听 el-Pagination 的 `current-page` 属性变化来实现这个功能。首先,你需要在组件的模板里添加 el-Pagination 组件,并绑定一个方法处理重置操作。这里是一个简单的例子:
```html
<template>
<div>
<el-pagination
:page-size="pageSize"
:total="totalItems"
current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>
<!-- 其他内容... -->
<button @click="resetPage">重置到第一页</button>
</div>
</template>
<script>
export default {
data() {
return {
pageSize: 10,
currentPage: 1, // 初始页码设为1
totalItems: yourTotalItemCount, // 替换为实际的总记录数
};
},
methods: {
handleCurrentChange(page) {
this.currentPage = page;
},
resetPage() {
this.currentPage = 1; // 当点击重置按钮时,将当前页恢复到1
},
},
};
</script>
```
在这个例子中,当用户点击 "重置到第一页" 按钮时,`resetPage` 方法会被调用,将 `currentPage` 的值设置回1,实现了从第三页返回到第一页的功能。
阅读全文