diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index 79a443eded..a0cedc4081 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -6,10 +6,13 @@
       type="card"
       style-type="radioGroup"
       class="de-tabs-height"
+      :class="isEdit ? 'de-tabs-edit' : ''"
       :font-color="fontColor"
       :active-color="activeColor"
       :border-color="borderColor"
       :border-active-color="borderActiveColor"
+      :addable="isEdit"
+      @tab-add="addTab"
       @tab-click="handleClick"
     >
       <!--  <plugin-com ref="dataease-tabs" v-model="activeTabName" type="card" class="de-tabs" component-name="dataease-tabs" @tab-click="handleClick"> -->
@@ -400,6 +403,9 @@ export default {
       this.$store.dispatch('chart/setViewId', null)
       this.styleChange()
     },
+    addTab() {
+      this.addNewTab(this.element.id)
+    },
 
     addNewTab(componentId) {
       if (!componentId || componentId !== this.element.id) return
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 3d7703f73c..ca8f3457e0 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -143,7 +143,9 @@ div:focus {
     height: 100vh !important;
   }
 }
-
+.de-tabs-edit {
+    padding-right: 50px !important;
+}
 .de-tabs {
   .el-tabs__header {
     margin: 0 0 0 0 !important;