优化

components/tabs/TabBarMixin.js

@@ -91,7 +91,7 @@ export default {
       const {
         prefixCls, onKeyDown, tabBarPosition, hideAdd,
       } = this
-      let extraContent = this.extraContent
+      let extraContent = this.$slots.extraContent
       const tabsType = this.$parent.type
       const cls = {
         [`${prefixCls}-bar`]: true,
@@ -99,8 +99,6 @@ export default {
       const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom')
       const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}
       let children = contents
-      extraContent = typeof extraContent === 'function' ? extraContent(createElement) : extraContent
-      extraContent = extraContent || this.$slots.extraContent
       if (tabsType === 'editable-card' && !hideAdd) {
         extraContent = (
           <span>

components/tabs/TabPane.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'TabPane',
   props: {
-    tab: [String, Number, Function],
+    tab: [String, Number, Function, Array],
     disabled: Boolean,
     closable: Boolean,
     forceRender: Boolean,

components/tabs/Tabs.vue

@@ -163,7 +163,7 @@ export default {
       if (componentOptions) {
         if (componentOptions.propsData.tab === undefined) {
           componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
-            ? h => h('span', [$slots[`tab_${tabKey}`]])
+            ? $slots[`tab_${tabKey}`]
             : null
         }
         panels.push({ ...componentOptions.propsData, tabKey })
@@ -195,9 +195,9 @@ export default {
     }
     const contents = [
       <ScrollableInkTabBar {...tabBarProps}>
-        {$slots.tabBarExtraContent ? <span slot='extraContent'>
+        {$slots.tabBarExtraContent ? <template slot='extraContent'>
           {$slots.tabBarExtraContent}
-        </span> : null}
+        </template> : null}
       </ScrollableInkTabBar>,
       <TabContent {...tabContentProps}>
         {$slots.default}

components/tabs/index.vue

@@ -102,18 +102,18 @@ export default {
       [`${prefixCls}-no-animation`]: !tabPaneAnimated,
     }
     tabBarExtraContent = tabBarExtraContent === undefined && $slots.tabBarExtraContent
-      ? h => h('span', [$slots.tabBarExtraContent])
-      : tabBarExtraContent
+      ? $slots.tabBarExtraContent : tabBarExtraContent
+    tabBarExtraContent = typeof tabBarExtraContent === 'function'
+      ? tabBarExtraContent(createElement) : tabBarExtraContent
     $slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => {
       if (componentOptions && componentOptions.propsData.tab === undefined) {
         componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
-          ? h => h('span', [$slots[`tab_${tabKey}`]])
+          ? $slots[`tab_${tabKey}`]
           : null
       }
     })
     const tabBarProps = {
       inkBarAnimated,
-      extraContent: tabBarExtraContent,
       onTabClick,
       onPrevClick,
       onNextClick,
@@ -152,6 +152,9 @@ export default {
         {...tabsProps}
       >
         {this.$slots.default}
+        {tabBarExtraContent ? <template slot='tabBarExtraContent'>
+          {tabBarExtraContent}
+        </template> : null}
       </Tabs>
     )
   },