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

Tabs: fix lazy loading (#11461) 

* Tabs: fix lazy tab-pane order

* Tabs: fix lazy loading
pull/11464/head
Jikkai Xiao 2018-06-01 17:43:22 +08:00 committed by 杨奕
parent 08193fdbdb
commit eb1479d3bc
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="el-tab-pane" class="el-tab-pane"
v-if="!lazy || active" v-if="(!lazy || loaded) || active"
v-show="active" v-show="active"
role="tabpanel" role="tabpanel"
:aria-hidden="!active" :aria-hidden="!active"
@ -28,7 +28,8 @@
data() { data() {
return { return {
index: null index: null,
loaded: false
}; };
}, },
@ -37,7 +38,11 @@
return this.closable || this.$parent.closable; return this.closable || this.$parent.closable;
}, },
active() { active() {
return this.$parent.currentName === (this.name || this.index); const active = this.$parent.currentName === (this.name || this.index);
if (active) {
this.loaded = true;
}
return active;
}, },
paneName() { paneName() {
return this.name || this.index; return this.name || this.index;

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

@ -88,9 +88,7 @@
} }
}, },
addPanes(item) { addPanes(item) {
const index = this.$slots.default.filter(item => { const index = this.$slots.default.indexOf(item.$vnode);
return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className);
}).indexOf(item.$vnode);
this.panes.splice(index, 0, item); this.panes.splice(index, 0, item);
}, },
removePanes(item) { removePanes(item) {

4
test/unit/specs/tabs.spec.js
View File

@ -494,8 +494,8 @@ describe('Tabs', () => {
vm.$el.querySelector('.el-tabs__nav > #tab-A').click(); vm.$el.querySelector('.el-tabs__nav > #tab-A').click();
vm.$nextTick(() => { vm.$nextTick(() => {
expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3); expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);
expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null); expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);
done(); done();
}); });
}); });