support tab title renter funtion

examples/docs/en-US/tabs.md

@@ -142,4 +142,5 @@ Border card tabs.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
+| label-content | render function for tab title | Function(h) | - | - |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |

examples/docs/zh-CN/tabs.md

@@ -137,4 +137,5 @@
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
+| label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |

packages/tabs/src/tab-pane.vue

@@ -3,10 +3,8 @@
     name: 'el-tab-pane',
 
     props: {
-      label: {
-        type: String,
-        required: true
-      },
+      label: String,
+      labelContent: Function,
       name: String,
       closable: Boolean
     },

packages/tabs/src/tabs.vue

@@ -91,7 +91,7 @@
       const activeBar = !type
         ? <div class="el-tabs__active-bar" style={barStyle}></div>
         : null;
-
+  
       const tabs = this.$children.map((tab, index) => {
         let btnClose = h('span', {
           class: {
@@ -110,7 +110,7 @@
           refInFor: true,
           on: { click: (ev) => { handleTabClick(tab, ev); } }
         }, [
-          tab.label,
+          tab.labelContent ? tab.labelContent.call(this._renderProxy, h) : tab.label,
           tab.isClosable ? btnClose : null,
           index === 0 ? activeBar : null
         ]);

test/unit/index.js

@@ -4,7 +4,7 @@ Function.prototype.bind = require('function-bind');
 require('packages/theme-default/src/index.css');
 
 // require all test files (files that ends with .spec.js)
-const testsContext = require.context('./specs', true, /\.spec$/);
+const testsContext = require.context('./specs', true, /tabs\.spec$/);
 testsContext.keys().forEach(testsContext);
 
 // require all src files except main.js for coverage.

test/unit/specs/tabs.spec.js

@@ -220,4 +220,25 @@ describe('Tabs', () => {
       });
     }, 100);
   });
+  it('tab title render function', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" >
+          <el-tab-pane :label-content="renderTitle">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `,
+      methods: {
+        renderTitle(h) {
+          return <span>用户管理</span>;
+        }
+      }
+    }, true);
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelector('.el-tabs__item span').innerText).to.equal('用户管理');
+      done();
+    });
+  });
 });