feat:解决tab下组件多次创建的问题

src/views/business-analysis/topology/components/allBusinessCon.vue

@@ -299,7 +299,7 @@ import resize from '../../mixins/resize'
 import Topo from './Topo'
 import BigNumber from 'bignumber.js'
 export default {
-  name: 'KeyBusiness',
+  name: 'allBusinessCon',
   components: {
     Topo,
     ServiceSpaceDrawer

src/views/business-analysis/topology/components/keyBusinessCon.vue

@@ -190,7 +190,7 @@ import moment from 'moment'
 import Topo from './Topo'
 import BigNumber from 'bignumber.js'
 export default {
-  name: 'KeyBusiness',
+  name: 'keyBusinessCon',
   components: {
     Topo,
     ServiceSpaceDrawer
@@ -352,6 +352,7 @@ export default {
     }
   },
   created() {
+    console.log(34567890,'created')
     this.$store.commit('time/setTimeFlag', false)
 
     this.appItem = storage.get('appsItem')

src/views/business-analysis/topology/components/topoCon.vue

@@ -45,6 +45,7 @@
 <script>
 import storage from '@/utils/storage'
 export default {
+  name: 'topoCon',
   data() {
     return {
       loading: false,

src/views/business-analysis/topology/systemTab.vue

@@ -1,53 +1,48 @@
 <template>
   <div class="system-tab-content">
-    <el-tabs v-model="activeName" class="customTab" @tab-click="handleClick">
-      <el-tab-pane v-for="item in btnArr" :key="item.name" :name="item.name">
-        <span slot="label">
-          <el-button size="small" round class="ob-header-btn">{{ item.name }}</el-button>
-        </span>
-        <component :is="currentComponent" />
-      </el-tab-pane>
-    </el-tabs>
+    <el-tabs class="customTab" v-model="activeName">
+    <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
+      <span slot="label">
+        <el-button size="small" round class="ob-header-btn">{{ tab.label }}</el-button>
+      </span>
+      <component :is="tab.component" />
+    </el-tab-pane>
+  </el-tabs>
   </div>
 </template>
 <script>
-import topoCon from './components/topoCon.vue'
+import TopoCon from './components/topoCon.vue'
 import KeyBusinessCon from './components/keyBusinessCon.vue'
 import AllBusinessCon from './components/allBusinessCon.vue'
 export default {
   components: {
-    topoCon,
-    KeyBusinessCon,
-    AllBusinessCon
-  },
+  TopoCon,
+  KeyBusinessCon,
+  AllBusinessCon
+},
   data() {
     return {
-      btnArr: [{
-        name: '动态拓扑',
-        id: '1'
-      }, {
-        name: '重点业务',
-        id: '2'
-      }, {
-        name: '业务总览',
-        id: '3'
-      }],
-      isShow: false,
-      currentComponent: 'topoCon',
-      activeName: '动态拓扑'
-    }
-  },
-  methods: {
-    handleClick() {
-      const obj = {
-        '动态拓扑': 'topoCon',
-        '重点业务': 'KeyBusinessCon',
-        '业务总览': 'AllBusinessCon'
-      }
-      this.currentComponent = obj[this.activeName]
-    }
+      activeName: 'topoCon',
+      tabs: [
+        {
+          name: 'topoCon',
+          label: '动态拓扑',
+          component: 'TopoCon', // 组件名称
+        },
+        {
+          name: 'keyBusinessCon',
+          label: '重点业务',
+          component: 'KeyBusinessCon', // 组件名称
+        },
+        {
+          name: 'allBusinessCon',
+          label: '业务总览',
+          component: 'AllBusinessCon', // 组件名称
+        },
+      ]
+    };
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 .system-tab-content{
@@ -90,5 +85,4 @@ export default {
     font-size: 14px;
   }
 }
-
 </style>