feat: 修复线上tab不能默认选中的问题

src/components/SearchCom/index.vue

@@ -24,7 +24,7 @@
 
         </a-form-item>
       </a-col>
-      <a-col :md="6" :sm="24">
+      <a-col :md="6" :sm="24" style="min-width: 200px;">
       <!-- <a-col> -->
         <a-button type="primary" @click="handleQuery">查询</a-button>
         <a-button @click="resetQuery">重置</a-button>

src/views/mycollection/index.vue

@@ -1,54 +1,104 @@
 <template>
   <a-card :bordered="false">
-    <a-tabs v-if="activeTab" :default-active-key="activeTab">
+    <a-tabs v-if="activeTab" v-model="activeTab">
       <a-tab-pane key="1" tab="我的收藏">
-        <a-card :title="`我的收藏题目(共${collectionInfo.total}题)`" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
+        <a-card
-          <template v-if="collectionInfo.list && collectionInfo.list.length>0">
+          :title="`我的收藏题目(共${collectionInfo.total}题)`"
-            <template v-for="(item, index) in collectionInfo.list" >
+          :bordered="false"
+          :bodyStyle="{ padding: '0px !important' }"
+          :headStyle="{ paddingLeft: '0px !important' }"
+        >
+          <template v-if="collectionInfo.list && collectionInfo.list.length > 0">
+            <template v-for="(item, index) in collectionInfo.list">
               <div :key="index">
-                <DbQuestionInfoItem :data="item" :questionIndex="index+1" ></DbQuestionInfoItem>
+                <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
                 <a-divider></a-divider>
               </div>
             </template>
             <div class="flex-center">
-              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'collection')}" :default-current="collectionInfo.pageNum" :total="collectionInfo.total" />
+              <a-pagination
+                @change="
+                  (page, size) => {
+                    changePaginatio(page, size, 'collection');
+                  }
+                "
+                :default-current="collectionInfo.pageNum"
+                :total="collectionInfo.total"
+              />
             </div>
           </template>
           <a-empty style="margin: 30px 0;" v-else />
         </a-card>
       </a-tab-pane>
       <a-tab-pane key="2" tab="错题集">
-        <a-card title="我的错题题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
+        <a-card
-          <template v-if="wrongInfo.list && wrongInfo.list.length>0">
+          title="我的错题题目(共5题)"
-            <template v-for="(item, index) in wrongInfo.list" >
+          :bordered="false"
+          :bodyStyle="{ padding: '0px !important' }"
+          :headStyle="{ paddingLeft: '0px !important' }"
+        >
+          <template v-if="wrongInfo.list && wrongInfo.list.length > 0">
+            <template v-for="(item, index) in wrongInfo.list">
               <div :key="index">
-                <DbQuestionInfoItem :data="item" :questionIndex="index+1" ></DbQuestionInfoItem>
+                <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
                 <a-divider></a-divider>
               </div>
             </template>
             <div class="flex-center">
-              <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'wrong')}" :default-current="wrongInfo.pageNum" :total="wrongInfo.total" />
+              <a-pagination
+                @change="
+                  (page, size) => {
+                    changePaginatio(page, size, 'wrong');
+                  }
+                "
+                :default-current="wrongInfo.pageNum"
+                :total="wrongInfo.total"
+              />
             </div>
           </template>
           <a-empty style="margin: 30px 0;" v-else />
         </a-card>
       </a-tab-pane>
       <a-tab-pane key="3" tab="答题记录">
-        <a-card v-for="(item, index) in recordInfo.list" :key="index" style="margin-bottom: 15px;">
+        <template v-if="recordInfo.list && recordInfo.list.length > 0">
-          <div class="flex-center" >
+          <a-card
+            v-for="(item, index) in recordInfo.list"
+            :key="index"
+            style="margin-bottom: 15px;"
+          >
+            <div class="flex-center">
               <div style="flex: 1;">
                 <h3>{{ item.courseName }}</h3>
-              <div><span style="margin-right: 20px;">答题情况：做对{{ item.rightQuestions }}/{{ item.totalQuestions }}</span><span>交卷时间：{{ item.submitTime }}</span></div>
+                <div>
+                  <span style="margin-right: 20px;">
+                    答题情况：做对{{ item.rightQuestions }}/{{ item.totalQuestions }}
+                  </span>
+                  <span>交卷时间：{{ item.submitTime }}</span>
+                </div>
               </div>
               <div style="flex: 0 0 200px; text-align: right;">
-              <div @click="handlerGoReport(item, 1)" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看报告</a-button></div>
+                <div @click="handlerGoReport(item, 1)" :span="24" style="margin-bottom: 10px;">
-              <div @click="handlerGoReport(item, 2)" :span="24"><a-button type="danger" size="small">查看解析</a-button></div>
+                  <a-button type="primary" size="small">查看报告</a-button>
+                </div>
+                <div @click="handlerGoReport(item, 2)" :span="24">
+                  <a-button type="danger" size="small">查看解析</a-button>
+                </div>
               </div>
             </div>
           </a-card>
           <div class="flex-center">
-          <a-pagination @change="(page, size) =>{changePaginatio(page, size, 'record')}" :default-current="recordInfo.pageNum" :total="recordInfo.total" />
+            <a-pagination
+              @change="
+                (page, size) => {
+                  changePaginatio(page, size, 'record');
+                }
+              "
+              :default-current="recordInfo.pageNum"
+              :total="recordInfo.total"
+            />
           </div>
+        </template>
+        <a-empty v-else></a-empty>
       </a-tab-pane>
     </a-tabs>
   </a-card>
@@ -57,7 +107,11 @@
 <script>
 import { Pagination } from 'ant-design-vue'
 import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
-import { practiceCollectionPageList, practiceRecordPageList, practiceWrongPageList } from '@/api/practice/practice'
+import {
+  practiceCollectionPageList,
+  practiceRecordPageList,
+  practiceWrongPageList
+} from '@/api/practice/practice'
 
 export default {
   components: { DbQuestionInfoItem, 'a-pagination': Pagination },
@@ -86,6 +140,7 @@ export default {
   },
   mounted () {
     this.activeTab = this.$route.query.type || '1'
+    console.log('>>>>>>>>>.', this.activeTab)
     this.initData()
   },
   methods: {
@@ -97,7 +152,10 @@ export default {
     // 获取收藏列表
     getPracticecollectionPageList () {
       const { collectionInfo } = this
-      practiceCollectionPageList({ pageSize: collectionInfo.pageSize, pageNum: collectionInfo.pageNum }).then(res => {
+      practiceCollectionPageList({
+        pageSize: collectionInfo.pageSize,
+        pageNum: collectionInfo.pageNum
+      }).then(res => {
         this.collectionInfo.list = res.rows
         this.collectionInfo.total = res.total
       })
@@ -105,18 +163,22 @@ export default {
     // 获取答题记录
     getPracticerecordPageList () {
       const { recordInfo } = this
-      practiceRecordPageList({ pageSize: recordInfo.pageSize, pageNum: recordInfo.pageNum }).then(res => {
+      practiceRecordPageList({ pageSize: recordInfo.pageSize, pageNum: recordInfo.pageNum }).then(
+        res => {
           this.recordInfo.list = res.rows
           this.recordInfo.total = res.total
-      })
+        }
+      )
     },
     // 获取错题集
     getPracticewrongPageList () {
       const { wrongInfo } = this
-      practiceWrongPageList({ pageSize: wrongInfo.pageSize, pageNum: wrongInfo.pageNum }).then(res => {
+      practiceWrongPageList({ pageSize: wrongInfo.pageSize, pageNum: wrongInfo.pageNum }).then(
+        res => {
           this.wrongInfo.list = res.rows
           this.wrongInfo.total = res.total
-      })
+        }
+      )
     },
     // 分页切换
     changePaginatio (page, size, type) {
@@ -136,6 +198,4 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-
-</style>