vue3 自定义的分页组件在多个标签页中进行分页跳转不正确的问题

k3ppf0r

已于 2023-02-09 17:09:40 修改

阅读量451

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2023-02-09 16:50:01 首次发布

本文链接：https://blog.csdn.net/qcwwww/article/details/128954937

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了在自定义分页组件遇到的问题，即在第一个标签页切换分页时会跳转到其他标签页的当前页和分页大小。解决方案是通过使用activeKey变量并结合路由传递标签键，根据路由判断组件是否应在当前标签页挂载。此外，还提到了arco.design框架中分页组件的一个坑，即需要关闭`auto-adjust`属性来避免问题。

摘要由CSDN通过智能技术生成

问题场景：

自定义的分页组件在第一个标签页中进行分页切换时，页面会跳转到别的标签页中的中的当前页和分页大小
在这里插入图片描述

解决方案：

用定义变量activeKey进行读操作，并在标签页切换时将对应的标签key传入路由中
在这里插入图片描述
对于标签页中的组件，通过路由判断是否在本标签页中，选择是否挂载：

问题得到解决

顺带一个arco.design 框架的一个分页的坑：这个props关掉

<a-pagination class='arco-pagination' :total="total"  v-model:current="currentPage" v-model:page-size="pageSize"
            @change="changePage" @page-size-change="pageSizeChange" show-page-size show-total :auto-adjust="false" />