两个tab页共用一个el-pagination组件 当tab切换时 总页数不足内容显示错误

问题描述

当两个tab页共用一个el-pagination分页组件时，假如tab1页面共2页，而tab2页面仅一页，从tab1的第二页切换到tab2时，显示无数据，但tab2分页插件显示当前页为1；

解决办法

1. current-page属性使用.sync 修饰符

   <el-pagination 
   	...
   	:current-page.sync="pageNo"
   >
   </el-pagination>
   

2. 页面中新增一个tab切换标识

   let toggleTabFlag = false
   

3. tab切换时设置tab切换标识为true

   changeTab() {
     toggleTabFlag = true
     ...
     getData() // 正常情况走这里获取数据
   },
   

4. 监听pageNo

   watch: {
   	pageNo(newValue, oldValue) {
         if (toggleTabFlag && newValue < oldValue) {
           toggleTabFlag = false
           ...
           getData() // 仅当tab切换且页数变少时从这里获取数据
         }
       }
   }