Vue element UI tabs中动态添加组件

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">