The addition of element tabs to the component causes the component to be drawn multiple times

< 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 -sharpe4e7ed; */
}
.el-tab-pane{
    height: 100%;
    overflow-y: auto;
}
.el-tabs--border-card{
    border: 0px !important;
}

< / style >