elementui分页,在同一个页面,当前页点击按钮出现弹窗,保存弹窗关闭之后,还会显示之前点击的页数,如何实现
时间: 2024-03-16 13:45:38 浏览: 17
您可以在弹窗关闭之后,手动将当前页码重新设置为之前点击的页数。可以通过以下步骤实现:
1. 在分页组件中添加一个`currentPage`的变量来存储当前页码。
2. 在点击按钮时,记录下当前页码,并将其存储到一个变量中。
3. 在弹窗关闭时,手动将当前页码设置为之前记录的页码。
以下是一个示例代码:
```html
<template>
<div>
<el-pagination
:current-page="currentPage"
:total="total"
:page-size="pageSize"
@current-change="handleCurrentChange"
/>
<el-button @click="handleButtonClick">弹窗</el-button>
<el-dialog v-model="dialogVisible" @close="handleDialogClose">
弹窗内容
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
dialogVisible: false,
lastClickedPage: null,
};
},
methods: {
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
handleButtonClick() {
this.lastClickedPage = this.currentPage;
this.dialogVisible = true;
},
handleDialogClose() {
this.currentPage = this.lastClickedPage;
this.lastClickedPage = null;
},
},
};
</script>
```
在上面的代码中,我们定义了一个`lastClickedPage`变量来存储最后一次点击的页码。在点击按钮时,我们将当前页码存储到`lastClickedPage`中,并将弹窗设置为可见。在弹窗关闭时,我们将`currentPage`设置为`lastClickedPage`,这样就可以保留之前点击的页数了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)