Tabs: v-model/tab-pane name support number type

examples/docs/en-US/tabs.md

@@ -278,7 +278,7 @@ Only card type Tabs support addable & closeable.
 ### Tabs Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model  | binding value, name of the selected tab  | string   |  —  |  name of first tab |
+| value / v-model  | binding value, name of the selected tab  | string/number   |  —  |  name of first tab |
 | type     | type of Tab | string   | card/border-card  |     —    |
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
@@ -300,6 +300,6 @@ Only card type Tabs support addable & closeable.
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
 | disabled | whether Tab is disabled | boolean | — | false |
-| name      | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
+| name      | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string/number | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | lazy  | whether Tab is lazily rendered   | boolean   | — |  false  |

examples/docs/es/tabs.md

@@ -278,7 +278,7 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 ### Atributos de Pestañas
 | Atributo       | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
 | -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- |
-| value / v-model | valor enlazado, nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
+| value / v-model | valor enlazado, nombre de la pestaña seleccionada    | string/number  | —                     | nombre de la primer pestaña |
 | type           | tipo de Pestaña                      | string  | card/border-card      | —                           |
 | closable       | si la Pestaña es cerrable            | boolean | —                     | false                       |
 | addable        | si la Pestaña es añadible            | boolean | —                     | false                       |
@@ -300,6 +300,6 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 | -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
 | label    | título de la pestaña                                         | string  | —                 | —                                                            |
 | disabled | si la Tabulación está deshabilitada                          | boolean | —                 | false                                                        |
-| name     | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
+| name     | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string/number  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
 | closable | si el Tab es cerrable                                        | boolean | —                 | false                                                        |
 | lazy     | si Tab es renderizado con `lazy-load`                        | boolean | —                 | false                                                        |

examples/docs/fr-FR/tabs.md

@@ -279,7 +279,7 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string   |  —  | Nom du premier onglet. |
+| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string/number   |  —  | Nom du premier onglet. |
 | type     | Type de l'onglet. | string   | card/border-card  |     —    |
 | closable  | Si des onglets peuvent être supprimés. | boolean   | — |  false  |
 | addable  | Si des onglets peuvent être ajoutés. | boolean   | — |  false  |
@@ -303,6 +303,6 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | Titre de l'onglet. | string   | — |    —     |
 | disabled | Si l'onglet est désactivé. | boolean | — | false |
-| name      | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
+| name      | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string/number | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
 | closable  | Si l'onglet est supprimable. | boolean   | — |  false  |
 | lazy  | Si le contenu de l'onglet bénéficie du lazy-loading.  | boolean   | — |  false  |

examples/docs/zh-CN/tabs.md

@@ -276,7 +276,7 @@
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| value / v-model  | 绑定值，选中选项卡的 name  | string/number   |  —  |  第一个选项卡的 name |
 | type     | 风格类型   | string   | card/border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |
@@ -298,6 +298,6 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
 | disabled | 是否禁用 | boolean | — | false |
-| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
+| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string/number | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | lazy  | 标签是否延迟渲染   | boolean   | — |  false  |

packages/tabs/src/tab-bar.vue

@@ -24,7 +24,7 @@
             return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
           };
           this.tabs.every((tab, index) => {
-            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);
+            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName.toString());
             if (!$el) { return false; }
 
             if (!tab.active) {

packages/tabs/src/tab-nav.vue

@@ -18,7 +18,7 @@
 
     props: {
       panes: Array,
-      currentName: String,
+      currentName: [String, Number],
       editable: Boolean,
       onTabClick: {
         type: Function,
@@ -216,7 +216,7 @@
         ] : null;
 
       const tabs = this._l(panes, (pane, index) => {
-        let tabName = pane.name || pane.index || index;
+        let tabName = pane.name === 0 ? 0 : pane.name || pane.index || index;
         const closable = pane.isClosable || editable;
 
         pane.index = `${index}`;

packages/tabs/src/tab-pane.vue

@@ -20,7 +20,7 @@
     props: {
       label: String,
       labelContent: Function,
-      name: String,
+      name: [String, Number],
       closable: Boolean,
       disabled: Boolean,
       lazy: Boolean
@@ -37,15 +37,15 @@
       isClosable() {
         return this.closable || this.$parent.closable;
       },
+      paneName() {
+        return this.name === 0 ? 0 : this.name || this.index;
+      },
       active() {
-        const active = this.$parent.currentName === (this.name || this.index);
+        const active = this.$parent.currentName === this.paneName;
         if (active) {
           this.loaded = true;
         }
         return active;
-      },
-      paneName() {
-        return this.name || this.index;
       }
     },
 

packages/tabs/src/tabs.vue

@@ -10,7 +10,7 @@
 
     props: {
       type: String,
-      activeName: String,
+      activeName: [String, Number],
       closable: Boolean,
       addable: Boolean,
       value: {},
@@ -31,7 +31,7 @@
 
     data() {
       return {
-        currentName: this.value || this.activeName,
+        currentName: this.value === 0 ? 0 : this.value || this.activeName,
         panes: []
       };
     },
@@ -173,7 +173,7 @@
     },
   
     created() {
-      if (!this.currentName) {
+      if (this.currentName !== 0 && !this.currentName) {
         this.setCurrentName('0');
       }
 

types/tab-pane.d.ts

@@ -9,7 +9,7 @@ export declare class ElTabPane extends ElementUIComponent {
   disabled: boolean
 
   /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */
-  name: string
+  name: string | number
 
   /** Whether Tab is closable */
   closable: boolean

types/tabs.d.ts

@@ -18,7 +18,7 @@ export declare class ElTabs extends ElementUIComponent {
   editable: boolean
 
   /** Name of the selected tab */
-  value: string
+  value: string | number
 
   /** Position of tabs */
   tabPosition: TabPosition
@@ -27,5 +27,5 @@ export declare class ElTabs extends ElementUIComponent {
   stretch: Boolean
 
   /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */
-  beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise<any>
+  beforeLeave: (activeName: string | number, oldActiveName: string | number) => boolean | Promise<any>
 }