support tab disabled

examples/docs/en-US/tabs.md

@@ -143,4 +143,5 @@ Border card tabs.
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
 | label-content | render function for tab title | Function(h) | - | - |
+| disabled | whether Tab is disabled | boolean | - | false |
 | 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

@@ -138,4 +138,5 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
 | label-content | 选项卡的标题的渲染 Function | Function(h) | - | - |
+| disabled | 是否禁用 | boolean | - | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |

packages/tabs/src/tab-pane.vue

@@ -6,7 +6,8 @@
       label: String,
       labelContent: Function,
       name: String,
-      closable: Boolean
+      closable: Boolean,
+      disabled: Boolean
     },
 
     data() {

packages/tabs/src/tabs.vue

@@ -39,12 +39,21 @@
           let nextChild = tabs[index];
           let prevChild = tabs[index - 1];
 
-          this.currentName = nextChild ? nextChild.index : prevChild ? prevChild.index : '-1';
+          while (prevChild && prevChild.disabled) {
+            prevChild = tabs[tabs.indexOf(prevChild) - 1];
+          }
+
+          this.currentName = nextChild
+            ? nextChild.index
+            : prevChild
+            ? prevChild.index
+            : '-1';
         }
         this.$emit('tab-remove', tab);
         this.$forceUpdate();
       },
       handleTabClick(tab, event) {
+        if (tab.disabled) return;
         this.currentName = tab.index;
         this.$emit('tab-click', tab, event);
       },

packages/theme-default/src/tabs.css

@@ -59,6 +59,11 @@
         color: #1f2d3d;
         cursor: pointer;
       }
+
+      @when disabled {
+        color: var(--disabled-color-base);
+        cursor: default;
+      }
     }
     @e content {
       overflow: hidden;

test/unit/specs/tabs.spec.js

@@ -241,4 +241,26 @@ describe('Tabs', () => {
       done();
     });
   });
+  it('disabled', done => {
+    vm = createVue({
+      template: `
+        <el-tabs type="card">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane disabled label="配置管理" ref="disabled">B</el-tab-pane>
+          <el-tab-pane label="角色管理">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    vm.$nextTick(_ => {
+      let tabList = vm.$el.querySelector('.el-tabs__header').children;
+
+      tabList[1].click();
+      vm.$nextTick(_ => {
+        expect(tabList[1].classList.contains('is-active')).to.not.true;
+        done();
+      });
+    });
+  });
 });