diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 267fd3f172..5c5177dfd8 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/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,32 +54,39 @@
               </el-dropdown>
             </div>
           </template>
-          <de-canvas
-            v-if="isEdit && !mobileInPc"
-            :ref="'tabCanvas_' + index"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :class="moveActive ? 'canvas-move-in' : ''"
-            :canvas-active="editableTabsValue === tabItem.name"
-          ></de-canvas>
-          <de-preview
-            v-else
-            :ref="'dashboardPreview'"
-            :dv-info="dvInfo"
-            :cur-gap="curPreviewGap"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="{}"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :preview-active="editableTabsValue === tabItem.name"
-            :show-position="showPosition"
-            :outer-scale="scale"
-            :outer-search-count="searchCount"
-          ></de-preview>
         </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"
+          :component-data="tabItem.componentData"
+          :canvas-style-data="canvasStyleData"
+          :canvas-view-info="canvasViewInfo"
+          :canvas-id="element.id + '--' + tabItem.name"
+          :class="moveActive ? 'canvas-move-in' : ''"
+          :canvas-active="editableTabsValue === tabItem.name"
+        ></de-canvas>
+        <de-preview
+          v-else
+          :ref="'dashboardPreview'"
+          :dv-info="dvInfo"
+          :cur-gap="curPreviewGap"
+          :component-data="tabItem.componentData"
+          :canvas-style-data="{}"
+          :canvas-view-info="canvasViewInfo"
+          :canvas-id="element.id + '--' + tabItem.name"
+          :preview-active="editableTabsValue === tabItem.name"
+          :show-position="showPosition"
+          :outer-scale="scale"
+          :outer-search-count="searchCount"
+        ></de-preview>
+      </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>