element tabs加入组件导致组件多次绘制

Question

<template>

<el-tabs :type="type" v-model="activeName" :closable="closable" @tab-remove="removeTab">
    <el-tab-pane
        v-for="(tab) in editableTabs"
        :key="tab.name"
        :label="tab.title"
        :name="tab.name">
        <keep-alive>
            <component v-bind:is="currentTabComponent" v-bind="currentTabComponent.defaults"></component>
        </keep-alive>
    </el-tab-pane>
</el-tabs>

</template>
<script>
import home from '@/views/home'

export default {

name: 'tjtabs-component',
provide: function () {
    return {
        getPanel: this
    }
},
props: {
    //风格类型
    type: {
        type: String,
        default: 'border-card' //card/border-card
    },
    //是否需要首页
    isHome: {
        type: Boolean,
        default: true
    },
    //是否可关闭
    closable: {
        type: Boolean,
        default: true
    }
},
data(){
    return {
        components: [{name: 'home',component: home}],
        activeName: 'home',
        editableTabs: [{title: '首页',name: 'home',content: '首页'}]
    }
},
created(){
    if(!this.isHome){
        this.components = [],
        this.activeName = '',
        this.editableTabs = []
    }
},
computed: {
    //tab中对应的组件
    currentTabComponent(){
        let tab = this.components.find(o => {return o.name == this.activeName})
        if(!(!!tab.component)){
            return ()=>import('../error-page/not-found')
        }
        return tab.component
    }
},
beforeCreate: function () {
    this.$nextTick(function () {
        this.resizeTabPanelHeight()
    })
},
mounted(){
    const that = this
    window.onresize = () => {
        return (() => {
            that.resizeTabPanelHeight()
        })()
    }
},
methods: {
    resizeTabPanelHeight(){
        let tab = this.$el.offsetHeight
        let header = this.$el.childNodes[0].offsetHeight
        this.$el.childNodes[1].style.height = tab-header-1+'px'
    },
    addTab({title,name},component){
        // console.info( '添加标签页 ',title,name );
        let tab = this.editableTabs.filter((tab) => {
            return tab.name === name
        })[0]
        if(!!tab){
            this.activeName = tab.name
            return
        }
        this.editableTabs.push({title: title,name: name,content: ''})
        setTimeout(() => {
            this.components.push({name: name,component: component})
            this.activeName = name
        }, 0);
        
        console.info(this.components);
    },
    removeTab(targetName){
        if(targetName==='home'){
            return
        }
        let tabs = this.editableTabs
        let components = this.components
        let activeName = this.activeName

        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        this.components = components.filter(component => component.name !== targetName)
        this.activeName = this.editableTabs[this.editableTabs.length-1].name
    },
    //获取打开的tab
    getOpenTab(){
        return this.editableTabs.filter((tab) => tab.name === name)
    },
    //tab页是否存在
    isOpenTab(name){
        return !!(this.editableTabs.find((tab) => tab.name === name)) ? true : false
        //return this.editableTabs.filter((tab) => tab.name === name)
    },
    setActiveName(name){
        this.activeName = name
    }
}

}
</script>
<style>

.el-tabs__content{
    padding: 0px !important;
}
.el-tabs__header{
    margin: 0px;
    /* border-top: 1px solid #e4e7ed; */
}
.el-tab-pane{
    height: 100%;
    overflow-y: auto;
}
.el-tabs--border-card{
    border: 0px !important;
}

</style>