diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue index c94b01d5..bb6d4f15 100644 --- a/packages/tabs/src/tab-pane.vue +++ b/packages/tabs/src/tab-pane.vue @@ -49,17 +49,6 @@ } }, - mounted() { - this.$parent.addPanes(this); - }, - - destroyed() { - if (this.$el && this.$el.parentNode) { - this.$el.parentNode.removeChild(this.$el); - } - this.$parent.removePanes(this); - }, - watch: { label() { this.$parent.$forceUpdate(); diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue index 8e723974..34982ecc 100644 --- a/packages/tabs/src/tabs.vue +++ b/packages/tabs/src/tabs.vue @@ -53,6 +53,17 @@ }, methods: { + calcPaneInstances() { + if (this.$slots.default) { + const paneSlots = this.$slots.default.filter(vnode => vnode.tag && + vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane'); + // update indeed + const panes = paneSlots.map(({ componentInstance }) => componentInstance); + if (!(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]))) { + this.panes = panes; + } + } + }, handleTabClick(tab, tabName, event) { if (tab.disabled) return; this.setCurrentName(tabName); @@ -87,21 +98,9 @@ } else { changeCurrentName(); } - }, - addPanes(item) { - const index = this.$slots.default.filter(item => { - return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className) || item.elm.nodeType === 8; - }).indexOf(item.$vnode); - this.panes.splice(index, 0, item); - }, - removePanes(item) { - const panes = this.panes; - const index = panes.indexOf(item); - if (index > -1) { - panes.splice(index, 1); - } } }, + render(h) { let { type, @@ -164,10 +163,19 @@ ); }, + created() { if (!this.currentName) { this.setCurrentName('0'); } + }, + + mounted() { + this.calcPaneInstances(); + }, + + updated() { + this.calcPaneInstances(); } }; diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js index 4f8ff64f..75702fce 100644 --- a/test/unit/specs/tabs.spec.js +++ b/test/unit/specs/tabs.spec.js @@ -223,19 +223,19 @@ describe('Tabs', () => { const paneList = vm.$el.querySelector('.el-tabs__content').children; tabList[1].querySelector('.el-icon-close').click(); - vm.$nextTick(_ => { + setTimeout(_ => { expect(tabList.length).to.be.equal(2); expect(paneList.length).to.be.equal(2); expect(tabList[1].classList.contains('is-active')).to.be.true; vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click(); - vm.$nextTick(_ => { + setTimeout(_ => { expect(tabList.length).to.be.equal(3); expect(paneList.length).to.be.equal(3); expect(tabList[2].classList.contains('is-active')).to.be.true; done(); - }); - }); + }, 100); + }, 100); }, 100); }); it('addable & closable', done => { @@ -310,19 +310,19 @@ describe('Tabs', () => { vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click(); - vm.$nextTick(_ => { + setTimeout(_ => { expect(tabList.length).to.be.equal(3); expect(paneList.length).to.be.equal(3); expect(tabList[2].classList.contains('is-active')).to.be.true; tabList[2].querySelector('.el-icon-close').click(); - vm.$nextTick(_ => { + setTimeout(_ => { expect(tabList.length).to.be.equal(2); expect(paneList.length).to.be.equal(2); expect(tabList[1].classList.contains('is-active')).to.be.true; done(); - }); - }); + }, 100); + }, 100); }, 100); }); it('closable in tab-pane', (done) => {