SOURCE

const {createApp } =Vue

const {ElMessageBox} =ElementPlus

createApp({
    data:function(){
        return {
            tabs:[{
                name:"区域设置",
                id:12,
                edit:false
            },{
                name:"岗位设置",
                id:34,
                edit:false
            },{
                name:"其他设置",
                id:67,
                edit:false
            }],
            message:'hello',
            activeName:12
        }
    },
    methods:{
        saveTab(tab){
            console.log("save==>",JSON.stringify(tab))
            tab.edit=false
            this.closable=true
        },
        removeTab(tab){
            console.log('remove===>',tab)
            ElMessageBox.confirm('title',{
                title:"确定要删除吗",
                type:'warn',
                confirmButtonText:"确定",
                cancelButtonText:"取消"
            }).then(()=>{
                //调用接口存数据
            })
        },
        editTab(tab){
            console.log(tab)
            tab.edit=true
            this.tabs.forEach(item=>{
                if(item.id !== tab.id){
                    item.edit=false
                }
            })
            this.closable=false
        },
        closable:true
    }
}).use(ElementPlus).mount('#app')

<div id="app">
	<el-tabs  v-model="activeName" stretch type="card" @tab-remove.prevent="removeTab" closable>
		<el-tab-pane  v-for="tab in tabs" :label="tab.name" :name="tab.id" :key="tab.id">
			<template #label>
                <div>
				<div v-if="tab.edit">
					<el-input size="small" v-model="tab.name"
                    @blur="saveTab(tab)"
                    @keyup.enter="saveTab(tab)"
                    ></el-input>
				</div>
				<span v-else @click.prevent="editTab(tab)">{{tab.name}}</span>
                </div>
       </template>
       </el-tab-pane>
   </el-tabs>
</div>