fix tabs bug

components/tabs/TabBarMixin.js

@@ -98,7 +98,7 @@ export default {
       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/Tabs.vue

@@ -5,7 +5,7 @@ import TabContent from './TabContent'
 import ScrollableInkTabBar from './ScrollableInkTabBar'
 function getDefaultActiveKey (t) {
   let activeKey
-  t.$slots.default.forEach(({ componentOptions = {}}) => {
+  t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}}) => {
     const child = componentOptions.propsData
     if (child && !activeKey && !child.disabled) {
       activeKey = child.tabKey
@@ -14,7 +14,7 @@ function getDefaultActiveKey (t) {
   return activeKey
 }
 function activeKeyIsValid (t, key) {
-  const keys = t.$slots.default.map(({ componentOptions = {}}) => {
+  const keys = t.$slots.default && t.$slots.default.map(({ componentOptions = {}}) => {
     const child = componentOptions.propsData
     if (child) {
       return child.tabKey
@@ -116,7 +116,7 @@ export default {
     getNextActiveKey (next) {
       const activeKey = this.stateActiveKey
       const children = []
-      this.$slots.default.forEach(({ componentOptions = {}}) => {
+      this.$slots.default && this.$slots.default.forEach(({ componentOptions = {}}) => {
         const c = componentOptions.propsData
         if (c && !c.disabled && c.disabled !== '') {
           if (next) {
@@ -154,13 +154,11 @@ export default {
       setActiveKey,
       $slots,
     } = this
-    const hasSlot = !!$slots.default
     const panels = []
-    if (hasSlot) {
-      $slots.default.forEach(tab => {
-        tab.componentOptions && panels.push(tab.componentOptions.propsData)
-      })
-    }
+
+    $slots.default && $slots.default.forEach(tab => {
+      tab.componentOptions && panels.push(tab.componentOptions.propsData)
+    })
     const tabContentProps = {
       props: {
         ...this.tabContentProps,
@@ -186,7 +184,11 @@ export default {
       style: this.tabBarProps.style || {},
     }
     const contents = [
-      <ScrollableInkTabBar {...tabBarProps} />,
+      <ScrollableInkTabBar {...tabBarProps}>
+        {$slots.tabBarExtraContent ? <span slot='extraContent'>
+          {$slots.tabBarExtraContent}
+        </span> : null}
+      </ScrollableInkTabBar>,
       <TabContent {...tabContentProps}>
         {$slots.default}
       </TabContent>,

components/tabs/demo/extra.vue

@@ -1,9 +1,18 @@
 <template>
+<div>
   <Tabs :tabBarExtraContent="operations">
     <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
     <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
     <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
   </Tabs>
+  <Tabs>
+    <TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
+    <TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
+    <TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
+    <AntButton slot="tabBarExtraContent">Extra Action</AntButton>
+  </Tabs>
+</div>
+
 </template>
 <script>
 import { Tabs, Button } from 'antd'
@@ -16,6 +25,7 @@ export default {
   components: {
     Tabs,
     TabPane: Tabs.TabPane,
+    AntButton: Button,
   },
 }
 </script>

components/tabs/index.vue

@@ -81,8 +81,9 @@ export default {
       destroyInactiveTabPane = false,
       activeKey,
       defaultActiveKey,
+      $slots,
     } = this
-    const { tabBarExtraContent } = this.$props
+    let { tabBarExtraContent } = this.$props
     let { inkBarAnimated, tabPaneAnimated } = typeof animated === 'object' ? { // eslint-disable-line
       inkBarAnimated: !!animated.inkBar, tabPaneAnimated: !!animated.tabPane,
     } : {
@@ -100,7 +101,9 @@ export default {
       [`${prefixCls}-${type}`]: true,
       [`${prefixCls}-no-animation`]: !tabPaneAnimated,
     }
-
+    tabBarExtraContent = tabBarExtraContent || ((h) => {
+      return h('span', [$slots.tabBarExtraContent])
+    })
     const tabBarProps = {
       inkBarAnimated,
       extraContent: tabBarExtraContent,