关于Ant Design Vue的 Tabs 标签页默认打开页面缓存问题

问题描述

设置默认打开的标签页为key=1（第一个），如果关闭的时候是key=3（第三个标签页），再次打开的时候还是第三页，应该每次打开都为设置的默认页面（key=1）

存在缓存的错误代码

（1）引入标签页

<a-tabs defaultActiveKey="1" @change="callback">
     <a-tab-pane tab="企业基本信息" key="1" forceRender>
          <company-base-info ref="CompanyBaseInfo"></company-base-info>
     </a-tab-pane>
     <a-tab-pane tab="企业账户信息" key="2" forceRender>
           <company-account-info ref="CompanyAccountInfo"></company-account-info>
     </a-tab-pane>
     <a-tab-pane tab="企业用户信息" key="3" forceRender>
           <company-user-info ref="CompanyUserInfo"></company-user-info>
     </a-tab-pane>
     <a-tab-pane tab="企业证书信息" key="4" forceRender>
           <company-cfca-cert-info ref="CompanyCfcaCertInfo"></company-cfca-cert-info>
     </a-tab-pane>
     <a-tab-pane tab="企业电子印章" key="5" forceRender>
            <company-cfca-seal-info ref="CompanyCfcaSealInfo"></company-cfca-seal-info>
     </a-tab-pane>
</a-tabs>

（2）导入相关页面modal和components（ps:路径自行调整）

  import CompanyBaseInfo from './CompanyBaseInfo'
  import CompanyAccountInfo from './CompanyAccountInfo'
  import CompanyUserInfo from './CompanyUserInfo'
  import CompanyCfcaCertInfo from './CompanyCfcaCertInfo'
  import CompanyCfcaSealInfo from './CompanyCfcaSealInfo'

components: {
      CompanyCfcaSealInfo,
      CompanyCfcaCertInfo,
      CompanyUserInfo,
      CompanyAccountInfo,
      CompanyBaseInfo
}

（3）进入modal调用各个标签页的数据获取方法

open(id) {      // 这里的id为企业Id
        this.companyId = id;     // 来回切换标签页调用数据使用
        this.$nextTick(()=>{    // 为了解决init方法未定义问题，重新加载DOM
          this.$refs.CompanyBaseInfo.init(id);
          this.$refs.CompanyAccountInfo.init(id);
          this.$refs.CompanyUserInfo.init(id);
          this.$refs.CompanyCfcaCertInfo.init(id);
          this.$refs.CompanyCfcaSealInfo.init(id);
        })
}

（4）回调方法（标签间来回切换）

callback(key) {
        if (key == 1){
          this.$refs.CompanyBaseInfo.init(this.companyId);
        }
        else if (key == 2){
          this.$refs.CompanyAccountInfo.init(this.companyId);
        }
        else if (key == 3){
          this.$refs.CompanyUserInfo.init(this.companyId);
        }
        else if (key == 4){
          this.$refs.CompanyCfcaCertInfo.init(this.companyId);
        }
        else if (key == 5){
          this.$refs.CompanyCfcaSealInfo.init(this.companyId);
        }
}

正确代码

<a-tabs :activeKey="defaultActiveKey" @change="callback">
     <a-tab-pane tab="企业基本信息" key="1" forceRender>
          <company-base-info ref="CompanyBaseInfo"></company-base-info>
     </a-tab-pane>
     <a-tab-pane tab="企业账户信息" key="2" forceRender>
           <company-account-info ref="CompanyAccountInfo"></company-account-info>
     </a-tab-pane>
     <a-tab-pane tab="企业用户信息" key="3" forceRender>
           <company-user-info ref="CompanyUserInfo"></company-user-info>
     </a-tab-pane>
     <a-tab-pane tab="企业证书信息" key="4" forceRender>
           <company-cfca-cert-info ref="CompanyCfcaCertInfo"></company-cfca-cert-info>
     </a-tab-pane>
     <a-tab-pane tab="企业电子印章" key="5" forceRender>
            <company-cfca-seal-info ref="CompanyCfcaSealInfo"></company-cfca-seal-info>
     </a-tab-pane>
</a-tabs>

ps：导入和组件还按照原来的

在data()中定义默认标签页

defaultActiveKey: '1',

open(id) {
        this.companyId = id;
        this.$nextTick(()=>{
          this.defaultActiveKey = '1';    // 进入标签页默认打开页面设置
          this.$refs.CompanyBaseInfo.init(id);
          this.$refs.CompanyAccountInfo.init(id);
          this.$refs.CompanyUserInfo.init(id);
          this.$refs.CompanyCfcaCertInfo.init(id);
          this.$refs.CompanyCfcaSealInfo.init(id);
        })
}

callback(key) {
        switch(key){
          case '1':
            this.$refs.CompanyBaseInfo.init(this.companyId);
            this.defaultActiveKey = '1'
            break
          case '2':
            this.$refs.CompanyAccountInfo.init(this.companyId);
            this.defaultActiveKey = '2'
            break
          case '3':
            this.$refs.CompanyUserInfo.init(this.companyId);
            this.defaultActiveKey = '3'
            break
          case '4':
            this.$refs.CompanyCfcaCertInfo.init(this.companyId);
            this.defaultActiveKey = '4'
            break
          case '5':
            this.$refs.CompanyCfcaSealInfo.init(this.companyId);
            this.defaultActiveKey = '5'
            break
        }
}

说明：this.$refs.CompanyBaseInfo.init(this.companyId);为相应标签页的数据获取方法，companyId为设置的全局变量

有啥问题可以给我留言