diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue index 2fed097fc..b406c88f1 100644 --- a/src/components/tabs/pane.vue +++ b/src/components/tabs/pane.vue @@ -16,7 +16,8 @@ default: '' }, icon: { - type: String + type: String, + default: '' }, disabled: { type: Boolean, diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue index fcd12c5d9..6ee1c47bf 100644 --- a/src/components/tabs/tabs.vue +++ b/src/components/tabs/tabs.vue @@ -116,10 +116,6 @@ default: false }, beforeRemove: Function, - // Tabs 嵌套时,用 name 区分层级 - name: { - type: String - }, // 4.3.0 draggable: { type: Boolean, @@ -144,7 +140,8 @@ contextMenuStyles: { top: 0, left: 0 - } + }, + isRepeat: false //记录label是否重复 }; }, computed: { @@ -239,42 +236,39 @@ methods: { getTabs () { // return this.$children.filter(item => item.$options.name === 'TabPane'); - const AllTabPanes = findComponentsDownward(this, 'TabPane'); - const TabPanes = []; - - AllTabPanes.forEach(item => { - if (item.tab && this.name) { - if (item.tab === this.name) { - TabPanes.push(item); - } - } else { - TabPanes.push(item); + const repeat = {}; + let isRepeat = false; + const AllTabPanes = findComponentsDownward(this, 'TabPane', (child) => { + if (!isRepeat) { + if (repeat[child.name]) isRepeat = true; + else repeat[child.name] = true; } + if (child.$options.name === 'Tabs') return true; }); // 在 TabPane 使用 v-if 时,并不会按照预先的顺序渲染,这时可设置 index,并从小到大排序 - TabPanes.sort((a, b) => { + AllTabPanes.sort((a, b) => { if (a.index && b.index) { return a.index > b.index ? 1 : -1; } }); - return TabPanes; + return AllTabPanes; }, updateNav () { - this.navList = []; + //label无重时,pane.currentName无值时的默认值优先采用pane.label + if (!pane.currentName) pane.currentName = this.isRepeat ? index : pane.label; this.getTabs().forEach((pane, index) => { this.navList.push({ labelType: typeof pane.label, label: pane.label, - icon: pane.icon || '', - name: pane.currentName || index, + icon: pane.icon, + name: pane.currentName, disabled: pane.disabled, closable: pane.closable, contextMenu: pane.contextMenu }); - if (!pane.currentName) pane.currentName = index; if (index === 0) { - if (!this.activeKey) this.activeKey = pane.currentName || index; + if (!this.activeKey) this.activeKey = pane.currentName; } }); this.updateStatus(); diff --git a/src/utils/assist.js b/src/utils/assist.js index 3097d2888..1c357cf94 100644 --- a/src/utils/assist.js +++ b/src/utils/assist.js @@ -212,8 +212,11 @@ export function findComponentDownward (context, componentName) { } // Find components downward -export function findComponentsDownward (context, componentName) { +export function findComponentsDownward(context, componentName, filterName) { return context.$children.reduce((components, child) => { + if (typeof filterName === 'function') { + if (filterName(child, components)) return components; + } else if (filterName && child.$options.name === filterName) return components; if (child.$options.name === componentName) components.push(child); const foundChilds = findComponentsDownward(child, componentName); return components.concat(foundChilds);