github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/21552/head
Guan9 2021-12-14 20:00:17 +08:00
parent 55bac06f0f
commit 5f7362f918
10 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/en-US/tabs.md
View File

@ -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 |
| lazy | whether Tab is lazily rendered | boolean | — | false |

4
examples/docs/es/tabs.md
View File

@ -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 |

4
examples/docs/fr-FR/tabs.md
View File

@ -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 |

4
examples/docs/zh-CN/tabs.md
View File

@ -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 |

2
packages/tabs/src/tab-bar.vue
View File

@ -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) {

4
packages/tabs/src/tab-nav.vue
View File

@ -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}`;

10
packages/tabs/src/tab-pane.vue
View File

@ -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;
}
},

6
packages/tabs/src/tabs.vue
View File

@ -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');
}

2
types/tab-pane.d.ts vendored
View File

@ -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

4
types/tabs.d.ts vendored
View File

@ -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>
}