fix(component): [el-tabs] the initial pane should only render for once (#6563)

* fix(component): [el-tabs] the initial pane should only render for once

* test(component): [el-tabs] improve test of lazy load pane

* test(component): [el-tabs] fix lint error

Co-authored-by: KawaiiZapic <kawaiizapic@zapic.moe>
This commit is contained in:
Zapic 2022-03-12 20:44:17 +08:00 committed by GitHub
parent 45d915fa98
commit 525f61f8da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions

View File

@ -555,13 +555,18 @@ describe('Tabs.vue', () => {
'el-tab-pane': TabPane,
},
template: `
<el-tabs ref="tabs">
<el-tab-pane label="label-1" name="A">A</el-tab-pane>
<el-tabs v-model="activeName" ref="tabs">
<el-tab-pane label="label-1" lazy name="A">A</el-tab-pane>
<el-tab-pane label="label-2" name="B">B</el-tab-pane>
<el-tab-pane label="label-3" name="C">C</el-tab-pane>
<el-tab-pane label="label-4" lazy name="D">D</el-tab-pane>
</el-tabs>
`,
data() {
return {
activeName: 'A',
}
},
})
const navWrapper = wrapper.findComponent(TabNav)

View File

@ -38,11 +38,11 @@ export default defineComponent({
if (!tabsRoot) throwError(COMPONENT_NAME, `must use with ElTabs`)
const index = ref<string>()
const loaded = ref(false)
const isClosable = computed(() => props.closable || tabsRoot.props.closable)
const active = eagerComputed(
() => tabsRoot.currentName.value === (props.name || index.value)
)
const loaded = ref(active.value)
const paneName = computed(() => props.name || index.value)
const shouldBeRender = eagerComputed(
() => !props.lazy || loaded.value || active.value