diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 0e1d8d6a0b..4b7903ce00 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -27,6 +27,14 @@ export const assistList = [
     label: '矩形',
     icon: 'iconfont icon-juxing',
     defaultClass: 'text-filter'
+  },
+  {
+    id: '10006',
+    component: 'de-tabs',
+    type: 'de-tabs',
+    label: '选项卡',
+    icon: 'iconfont icon-juxing',
+    defaultClass: 'text-filter'
   }
 ]
 
@@ -139,6 +147,23 @@ const list = [
       borderRadius: ''
     }
   },
+  {
+    id: '10006',
+    component: 'de-tabs',
+    label: '选项卡',
+    propValue: '',
+    icon: 'juxing',
+    type: 'de-tabs',
+    style: {
+      width: 200,
+      height: 200,
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: '#000000',
+      backgroundColor: '#ffffff',
+      borderRadius: 0
+    }
+  },
   {
     id: '20001',
     component: 'picture-add',
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
new file mode 100644
index 0000000000..0fb6a815eb
--- /dev/null
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -0,0 +1,76 @@
+<template>
+
+  <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
+    <el-tab-pane
+      v-for="(item, index) in editableTabs"
+      :key="item.name"
+      :label="item.title"
+      :name="item.name"
+    >
+      {{ item.content }}
+    </el-tab-pane>
+  </el-tabs>
+
+</template>
+
+<script>
+export default {
+  name: 'DeTabls',
+  props: {
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+      editableTabsValue: '1',
+      editableTabs: [{
+        title: 'Tab 1',
+        name: '1',
+        content: ''
+      }],
+      tabIndex: 1
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+    handleTabsEdit(targetName, action) {
+      if (action === 'add') {
+        const newTabName = ++this.tabIndex + ''
+        this.editableTabs.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content'
+        })
+        this.editableTabsValue = newTabName
+      }
+      if (action === 'remove') {
+        const tabs = this.editableTabs
+        let activeName = this.editableTabsValue
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              const nextTab = tabs[index + 1] || tabs[index - 1]
+              if (nextTab) {
+                activeName = nextTab.name
+              }
+            }
+          })
+        }
+
+        this.editableTabsValue = activeName
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index 01866467c1..9a5b4a3ade 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -61,7 +61,7 @@ import { commonStyle, commonAttr } from '@/components/canvas/custom-component/co
 import generateID from '@/components/canvas/utils/generateID'
 
 export default {
-  name: 'FilterGroup',
+  name: 'AssisComponent',
   data() {
     return {
       assistList,