From 75e715544b9ae94b45749bc7d1e9897b9baffbfe Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 1 Nov 2023 16:44:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=89=E9=A1=B9=E5=8D=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=9C=A8=E5=88=9B=E5=BB=BA=E5=A4=9A=E4=B8=AA=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=97=B6=E7=AC=AC=E4=B8=80=E4=B8=AA=E5=92=8C=E7=AC=AC?=
 =?UTF-8?q?=E4=BA=8C=E4=B8=AA=E6=A0=87=E7=AD=BE=E8=A2=AB=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dataeaseTabs/index.vue     |  1 +
 .../src/components/widget/deWidget/DeTabs.vue | 24 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/core/frontend/src/components/dataeaseTabs/index.vue b/core/frontend/src/components/dataeaseTabs/index.vue
index 08afcceafa..3fd408fb59 100644
--- a/core/frontend/src/components/dataeaseTabs/index.vue
+++ b/core/frontend/src/components/dataeaseTabs/index.vue
@@ -1,5 +1,6 @@
 <template>
   <el-tabs
+    ref="tabsConstom"
     :class="['de-tabs',...tabClassName]"
     :style="tabStyle"
     v-bind="$attrs"
diff --git a/core/frontend/src/components/widget/deWidget/DeTabs.vue b/core/frontend/src/components/widget/deWidget/DeTabs.vue
index 223493b866..fd423cf34f 100644
--- a/core/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/core/frontend/src/components/widget/deWidget/DeTabs.vue
@@ -1,13 +1,14 @@
 <template>
   <div
     class="de-tabs-div"
-    :class="headClass"
+    :class="[headClass, headClassScroll]"
   >
     <div
       v-if="maskShow"
       class="frame-mask edit-mask"
     />
     <dataease-tabs
+      ref="deTabsConstom"
       v-model="activeTabName"
       type="card"
       style-type="radioGroup"
@@ -228,7 +229,7 @@ import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
 import DeCanvasTab from '@/components/canvas/DeCanvas'
 import Preview from '@/components/canvas/components/editor/Preview'
 import TextAttr from '@/components/canvas/components/TextAttr'
-
+import _ from 'lodash'
 export default {
   name: 'DeTabs',
   components: { TextAttr, Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
@@ -294,6 +295,7 @@ export default {
         'de-stream-media',
         'de-frame'
       ],
+      headClassScroll: 'head-class-scroll',
       activeTabName: null,
       tabIndex: 1,
       dialogVisible: false,
@@ -400,6 +402,14 @@ export default {
     }
   },
   watch: {
+    'outStyle.width': {
+      handler() {
+        this.setTabLayout()
+      }
+    },
+    headClass() {
+      this.setTabLayout()
+    },
     'element.style.carouselEnable': {
       handler(newVal, oldVla) {
         this.initCarousel()
@@ -471,11 +481,15 @@ export default {
   mounted() {
     this.initCarousel()
     this.calcTabLength()
+    this.setTabLayout()
   },
   beforeDestroy() {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    setTabLayout: _.debounce(function() {
+      this.headClassScroll = !!this.$refs.deTabsConstom.$refs.tabsConstom.$refs.nav.scrollable && 'head-class-scroll'
+    }, 100),
     calcTabLength(){
       this.$nextTick(()=>{
         if(this.element.options.tabList.length>1){
@@ -695,9 +709,11 @@ export default {
       }
       this.$store.dispatch('chart/setViewId', null)
       this.styleChange()
+      this.setTabLayout()
     },
     addTab() {
       this.addNewTab(this.element.id)
+      this.setTabLayout()
     },
 
     addNewTab(componentId) {
@@ -783,6 +799,10 @@ export default {
   justify-content: center;
 }
 
+.head-class-scroll ::v-deep .el-tabs__nav-scroll {
+  display: block !important;
+}
+
 .frame-mask {
   display: flex;
   opacity: 0;