diff --git a/devui/tabs/src/tab.tsx b/devui/tabs/src/tab.tsx
index b1f62a2ff59ae5f316e9b2cf680865797e7e0530..c7c263f43a694a978274179c956eac3412419f86 100644
--- a/devui/tabs/src/tab.tsx
+++ b/devui/tabs/src/tab.tsx
@@ -19,6 +19,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const tabs = inject<Tabs>('tabs');
+    tabs.state.slots.push(slots.dTabTitle);
     tabs.state.data.push(props);
     return () => {
       const { id } = props;
diff --git a/devui/tabs/src/tabs.tsx b/devui/tabs/src/tabs.tsx
index 430336510f8071fc92157db7e1ff6670aec9d645..2c84e1fa92c41541d501e4f7d30cacc634460421 100644
--- a/devui/tabs/src/tabs.tsx
+++ b/devui/tabs/src/tabs.tsx
@@ -6,7 +6,8 @@ import {
   PropType,
   provide,
   reactive,
-  ref
+  ref,
+  Slot
 } from 'vue';
 import './tabs.scss';
 
@@ -19,6 +20,7 @@ interface TabsState {
   data?: any[]
   showContent: boolean
   active: any
+  slots: Slot[]
 }
 export default defineComponent({
   name: 'DTabs',
@@ -65,7 +67,8 @@ export default defineComponent({
     const state: TabsState = reactive({
       data: [],
       active: props.modelValue,
-      showContent: props.showContent
+      showContent: props.showContent,
+      slots: []
     });
     provide<Tabs>('tabs', {
       state
@@ -157,7 +160,7 @@ export default defineComponent({
             class={`devui-nav devui-nav-${ulClass.join(' ')}`}
             id='devuiTabs11'
           >
-            {state.data.map((item) => {
+            {state.data.map((item, i) => {
               return (
                 <li
                   role='presentation'
@@ -178,7 +181,11 @@ export default defineComponent({
                     data-toggle={item.id}
                     aria-expanded={props.modelValue === (item.id || item.tabId)}
                   >
-                    <span>{item.title}</span>
+                    {state.slots[i] ? (
+                      state.slots[i]()
+                    ) : (
+                      <span>{item.title}</span>
+                    )}
                   </a>
                 </li>
               );
diff --git a/docs/components/tabs/index.md b/docs/components/tabs/index.md
index 65008afcf22e8ece930a82654ac93016e6c5ac36..b7f2486136c4c4bf63d627f9c861666442b91289 100644
--- a/docs/components/tabs/index.md
+++ b/docs/components/tabs/index.md
@@ -262,17 +262,54 @@ export default defineComponent({
 
 :::
 
+### 自定义模板
+
+:::demo
+
+```vue
+<template>
+  <d-tabs type="tabs" v-model="id">
+    <d-tab id="tab1" title="Tab1" tabId="tab1">
+      <template v-slot:dTabTitle> 就是这样 </template>
+      <p>Tab1 Content</p>
+    </d-tab>
+    <d-tab id="tab2" title="Tab2" tabId="tab2">
+      <template v-slot:dTabTitle> 就是这样1 </template>
+      <p>Tab2 Content</p>
+    </d-tab>
+    <d-tab id="tab3" title="Tab3" tabId="tab3">
+      <template v-slot:dTabTitle> 就是这样2 </template>
+      <p>Tab3 Content</p>
+    </d-tab>
+  </d-tabs>
+</template>
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const id = ref('tab3');
+    return {
+      id
+    };
+  }
+});
+</script>
+```
+
+:::
+
 ### API
 
-|     参数     |                      类型                       |  默认  |                                                 说明                                                  |                 |
-| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --------------- |
+|     参数     |                      类型                       |  默认  |                                                 说明                                                  |     |
+| :----------: | :---------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------: | --- |
 |     type     | `tabs \| pills \| options \| wrapped \| slider` | 'tabs' |                                         可选，选项卡组的类型                                          |
 | showContent  |                    `boolean`                    |  true  |                                    可选，是否显示选项卡对应的内容                                     |
 |   v-model    |                    `string`                     |   --   |                                可选，当前激活的选项卡，值为选项卡的 id                                |
 | customWidth  |                    `string`                     |   --   |                                        可选，自定义选项卡的宽                                         |
 |   vertical   |                    `boolean`                    | false  |                                           可选，是否垂直显                                            |
 | beforeChange |               `function\|Promise`               |   --   |                tab 切换前的回调函数,返回 boolean 类型，返回 false 可以阻止 tab 的切换                 |
-| reactivable  |                    `boolean`                    | false  | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 | [拦截 tab 切换] |
+| reactivable  |                    `boolean`                    | false  | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 |
 
 ### d-tabs 事件