element ui 中Tabs：
https://element.eleme.io/#/zh-CN/component/tabs
它的例子很简单，tabs中都是文字，但是一般情况下，我们的tabs中间都是组件，那么该如何写呢？很容易想到，用v-for就行了
<template>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane :label="title.label" :name="title.name" :key="title.name" v-for="title in header">
<childcomponent></childcomponent>
</el-tab-pane>
</el-tabs>
</template>
<script>
import childcomponent from childcomponent
export default {
name: "tabs",
data() {
return {
activeName: 'all',
header: [
{label: 'A', name: 'a'},
{label: 'B', name: 'b'},
{label: 'C', name: 'c'},
{label: 'D', name: 'd'}
]
}
},
compontents:{
childcomponent
}
}
</script>
<style scoped>
</style>
这样，貌似没有问题，但是接着往下开发的时候，我们会发现，每次换tab的时候，子组件的mounted()函数都会被触发4次。这是因为每次我们按tab的时候，都有4个子组件被渲染。所以我们要用v-if来选择渲染的组件。
<template>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane :label="title.label" :name="title.name" :key="title.name" v-for="title in header">
<childcomponent v-if="title.content"></childcomponent>
</el-tab-pane>
</el-tabs>
</template>
<script>
import childcomponent from
childcomponent
export default {
name: "tabs",
data() {
return {
activeName: 'a',
header: [
{label: 'A', name: 'a', content: true},
{label: 'B', name: 'b', content: false},
{label: 'C', name: 'c', content: false},
{label: 'D', name: 'd', content: false}
]
}
},
compontents: {
childcomponent
},
menthods: {
handleClick(tab) {
if (tab.name === "a") {
this.header[0]['content'] = true
this.header[1]['content'] = false
this.header[2]['content'] = false
this.header[3]['content'] = false
} else if (tab.name === "b") {
this.header[0]['content'] = false
this.header[1]['content'] = true
this.header[2]['content'] = false
this.header[3]['content'] = false
} else if (tab.name === "c") {
this.header[0]['content'] = false
this.header[1]['content'] = false
this.header[2]['content'] = true
this.header[3]['content'] = false
} else if (tab.name === "d") {
this.header[0]['content'] = false
this.header[1]['content'] = false
this.header[2]['content'] = false
this.header[3]['content'] = true
}
}
}
}
</script>
<style scoped>
</style>
这样就可以每次只触发一个组件了。如果有两层，三层tabs，只需要在下一层的<el-tabs>上添加上一层的v-if
<el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick2" v-if="title.content">
