fix(仪表板): 修复快速反复切换tab组件页，部分组件可能变形问题

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -15,7 +15,7 @@
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
     >
-      <template :key="tabItem.name" v-for="(tabItem, index) in element.propValue">
+      <template :key="tabItem.name" v-for="tabItem in element.propValue">
         <el-tab-pane
           class="el-tab-pane-custom"
           :lazy="isEditMode"
@@ -54,6 +54,14 @@
               </el-dropdown>
             </div>
           </template>
+        </el-tab-pane>
+      </template>
+      <div
+        style="position: absolute; width: 100%; height: 100%"
+        :key="tabItem.name + '-content'"
+        v-for="(tabItem, index) in element.propValue"
+        :class="{ 'switch-hidden': editableTabsValue !== tabItem.name }"
+      >
         <de-canvas
           v-if="isEdit && !mobileInPc"
           :ref="'tabCanvas_' + index"
@@ -78,8 +86,7 @@
           :outer-scale="scale"
           :outer-search-count="searchCount"
         ></de-preview>
-        </el-tab-pane>
-      </template>
+      </div>
     </de-custom-tab>
     <el-dialog
       title="编辑标题"
@@ -549,7 +556,6 @@ onBeforeMount(() => {
 }
 .el-tab-pane-custom {
   width: 100%;
-  height: 100%;
 }
 .canvas-move-in {
   border: 2px dotted transparent;
@@ -570,4 +576,9 @@ onBeforeMount(() => {
   display: flex;
   justify-content: center;
 }
+
+.switch-hidden {
+  opacity: 0;
+  z-index: -1;
+}
 </style>