点击菜单新增tab

 父组件

<template>
    <div>
         <el-container style="height:100%;">
            <el-header >
                <h1>人工智能自动化测试平台</h1> <div style="float:right"><Logout></Logout></div>
            </el-header>
            <el-container>
              <el-aside width="200px">
               <Menu  @childFn="test"></Menu>
              </el-aside>
              <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                      <el-tab-pane
                        v-for="(item, index) in editableTabs"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name"
                      >
                        <component :is="item.content"></component>
                      </el-tab-pane>
                    </el-tabs>
              </el-main>
            </el-container>
         </el-container>
    </div>
</template>
<script>
    import axios from 'axios'
    import Menu from "../components/Menu.vue"
    import Logout from "../components/Logout.vue"
    import YuLiao from "../components/YuLiao.vue"
    import YinPin from "../components/YinPin.vue"
    import Export2Postman from "../components/Export2Postman.vue"
    import IotDeviceDeal from "../components/IotDeviceDeal.vue"
    import GetSign from "../components/GetSign.vue"
    import HjwEnvChange from "../components/HjwEnvChange.vue"
    import RtosRequest from "../components/RtosRequest.vue"
    import NlpRequest from "../components/NlpRequest.vue"
    import Fromsn2Info from "../components/Fromsn2Info.vue"
    import GetTriggerIdNew from "../components/GetTriggerIdNew.vue"
    import Nlg from "../components/Nlg.vue"
    import GetInfoFTriggerid from "../components/GetInfoFTriggerid.vue"
    import GetTypeid from "../components/GetTypeid.vue"
    import AsrRequest from "../components/AsrRequest.vue"
    import PullLog from "../components/PullLog.vue"
    import RunDiff from "../components/RunDiff.vue"
    import DeviceInfo from "../components/DeviceInfo.vue"
    import NlpRequest2 from "../components/NlpRequest2.vue"
    import RtosAsrRequest from "../components/RtosAsrRequest.vue"
    export default{
        name:"welcome",
        data(){
            return{
               editableTabsValue: '0',
               editableTabs: [],
               tabIndex: 0
            }

        },
        components:{
             Menu,
             Logout,
             '语料库': () => import('../components/YuLiao.vue'),
             '音频库': () => import('../components/YinPin.vue'),
             '导出postman用例': () => import('../components/Export2Postman.vue'),
             'IOT平台虚拟设备处理': () => import('../components/IotDeviceDeal.vue'),
             '获取设备sign': () => import('../components/GetSign.vue'),
             '海极网环境变更': () => import('../components/HjwEnvChange.vue'),
             '实时nlp请求': () => import('../components/RtosRequest.vue'),
             '实时asr请求': () => import('../components/RtosAsrRequest.vue'),
             '发送nlp请求': () => import('../components/NlpRequest.vue'),
             '获取sn对应信息': () => import('../components/Fromsn2Info.vue'),
             '设备配置话术与播报': () => import('../components/GetTriggerIdNew.vue'),
             '智慧洗主被控话术与播报': () => import('../components/Nlg.vue'),
             '朱雀未配置话术及信息': () => import('../components/GetInfoFTriggerid.vue'),
             '获取朱雀日志typeid': () => import('../components/GetTypeid.vue'),
             'asr识别测试': () => import('../components/AsrRequest.vue'),
             '发送nlp请求2': () => import('../components/NlpRequest2.vue'),
             '拉取朱雀日志': () => import('../components/PullLog.vue'),
             '进行diff': () => import('../components/RunDiff.vue'),
             '设备信息配置': () => import('../components/DeviceInfo.vue'),

        },
        computed:{

        },
        methods:{
            valueInDictValues(valueToFind){
               return this.editableTabs.some(dict => Object.values(dict).includes(valueToFind));
            },
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                  title: 'New Tab',
                  name: newTabName,
                  content: 'tab-comp-2'
                });
                this.editableTabsValue = newTabName;
            },

            test(targetName) {
                if(this.valueInDictValues(targetName)){
                    console.log('old',this.tabIndex)
                    this.editableTabsValue = this.editableTabs.filter(dict => dict.title === targetName)[0]['name']
                    console.log('old',this.editableTabsValue)
                    console.log('old',this.editableTabs)
                }
                else{
                     let newTabName = ++this.tabIndex + '';
                     console.log(this.tabIndex)
                     this.editableTabs.push({
                      title: targetName,
                      name: newTabName,
                      content: targetName
                     });
                    this.editableTabsValue = newTabName;
                }

            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                        activeName = nextTab.name;
                      }
                    }
                  });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }


        }
    }
</script>

 子组件

<template>
<div>

    <el-menu :default-openeds="['1','2','3','5']" style="background-color:#d1f1ff" >
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-s-grid"></i>语料区</template>
          <el-menu-item index="1-1" @click="toYuLiao">语料库</el-menu-item>
          <el-menu-item index="1-2" @click="toYinPin">音频库</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-s-grid"></i>工具区</template>
          <el-menu-item index="2-1" @click="toExport2Postman">导出postman用例</el-menu-item>
          <el-menu-item index="2-2" @click="toIotDeviceDeal">IOT平台虚拟设备处理</el-menu-item>
          <el-menu-item index="2-3" @click="toGetSign">获取设备sign</el-menu-item>
          <el-menu-item index="2-4" @click="toHjwEnvChange">海极网环境变更</el-menu-item>
      </el-submenu>
        <el-submenu index="3">
        <template slot="title"><i class="el-icon-s-grid"></i>测试区</template>
          <el-menu-item index="3-1"  @click="toRtosRequest">实时nlp请求</el-menu-item>
          <el-menu-item index="3-2"  @click="toRtosAsrRequest">实时asr请求</el-menu-item>
          <el-menu-item index="3-3"  @click="toNlpRequest">发送nlp请求</el-menu-item>
          <el-menu-item index="3-4" @click="toFromsn2Info">获取sn对应信息</el-menu-item>
          <el-menu-item index="3-5" @click="toGetTriggerIdNew">设备配置话术与播报</el-menu-item>
          <el-menu-item index="3-6" @click="toNlg">智慧洗主被控话术测试</el-menu-item>
          <el-menu-item index="3-7" @click="toGetInfoFTriggerid">朱雀未配置话术及信息</el-menu-item>
          <el-menu-item index="3-8" @click="toGetTypeid">获取朱雀日志typeId</el-menu-item>
          <el-menu-item index="3-9" @click="toAsrRequest">asr识别测试</el-menu-item>
        </el-submenu>
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-s-grid"></i>DIFF区</template>
          <el-menu-item index="4-1"  @click="toNlpRequest2">发送nlp请求2</el-menu-item>
          <el-menu-item index="4-2" @click="toPullLog">拉取朱雀日志</el-menu-item>
          <el-menu-item index="4-3" @click="toRunDiff">进行diff</el-menu-item>
      </el-submenu>
       <el-submenu index="5">
        <template slot="title"><i class="el-icon-s-tools"></i>维护区</template>
          <el-menu-item index="5-1" @click="toDeviceInfo">设备信息配置</el-menu-item>
          <a href="/admin/" target="_blank" style="text-decoration:none"> <el-menu-item index="5-2">后台</el-menu-item></a>
          <a href="/admin/auth/user/" target="_blank" style="text-decoration:none"><el-menu-item index="5-3">用户管理</el-menu-item></a>
        </el-submenu>

    </el-menu>


</div>
</template>

<script>
    import axios from 'axios'
    export default{
        name:"Menu",
        data(){
            return{
                dialogFormVisible:false,
                dialogFormVisible2:false,
                dialogFormVisible3:false,
                formLabelWidth:'120px'
            };
        },
        methods:{
            toExport2Postman(){
                this.$emit('childFn','导出postman用例')
            },
            toDeviceInfo(){
                //this.$router.replace('/DeviceInfo').catch(()=>{});
                this.$emit('childFn','设备信息配置')
            },
            toNlpRequest(){
                this.$emit('childFn','发送nlp请求')
            },
            toAsrRequest(){
                this.$emit('childFn','asr识别测试')
            },
            toYuLiao(){
                this.$emit('childFn','语料库')
            },
            toYinPin(){
                this.$emit('childFn','音频库')
            },
            toFromsn2Info(){
                this.$emit('childFn','获取sn对应信息')
            },
            toIotDeviceDeal(){
                this.$emit('childFn','IOT平台虚拟设备处理')
            },
            toGetSign(){
                this.$emit('childFn','获取设备sign')
            },
            toHjwEnvChange(){
                this.$emit('childFn','海极网环境变更')
            },
            toGetTriggerIdNew(){
                this.$emit('childFn','设备配置话术与播报')
            },
            toNlg(){
                this.$emit('childFn','智慧洗主被控话术与播报')
            },
            toGetInfoFTriggerid(){
                this.$emit('childFn','朱雀未配置话术及信息')
            },
             toGetTypeid(){
                this.$emit('childFn','获取朱雀日志typeid')
            },
             toRtosRequest(){
                this.$emit('childFn','实时nlp请求')
            },
            toRtosAsrRequest(){
               this.$emit('childFn','实时asr请求')
            },

            toNlpRequest2(){
                this.$emit('childFn','发送nlp请求2')
            },
            toPullLog(){
                this.$emit('childFn','拉取朱雀日志')
            },
            toRunDiff(){
                 this.$emit('childFn','进行diff')
            },
        }
    }

</script>


<style scoped>
.image-circle {
  width: 150px; /* 或者你想要的任何尺寸 */
  height: 150px; /* 和宽度相同 */
  border-radius: 50%; /* 将图片变成圆形 */
}
</style>