关于el-tab自定义跳转的问题总结

 <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane  v-for="(item, index) in firstTab" 
        :key="index" :label="item.name" 
        :name="item.name" 
        :closable='item.closable'>
              <component :is="contentName" 
              v-if="metadataId" 
              :metadataId="metadataId">
              </component>
        </el-tab-pane>
<el-tabs>

然后在methods方法中写入

 handleClick(e) {
      console.log(e);//这里是为了获取VueComponent的实例对象
   if(e._props.name == '1'){
     this.contentName = 'basicInformation'
   }else if(e._props.name == '2'){
     this.contentName = 'columnInfo'
   }else if(e._props.name == '3'){
     this.contentName = 'dataInterface'
   }else if(e._props.name == '4'){
     this.contentName = 'dataKinship'
   }else if(e._props.name == '5'){
     this.contentName = 'dataQualty'
   }else if(e._props.name == '6'){
     this.contentName = 'dataDesen'
   }else if(e._props.name == '7'){
     this.contentName = 'datasetConfig'
   }else if(e._props.name == '8'){
     this.contentName = 'dataModel'
   }
},

async getModuleList(){
   await moduleList({metadataId:this.metadataId})
   .then((res)=>{
     this.firstTab = res.data.map(ele=>{
       if(ele.name == '1'){
          ele.contentName  = 'basicInformation'
       }else if(ele.name == '2'){
          ele.contentName  = 'columnInfo'
       }else if(ele.name == '3'){
          ele.contentName  = 'dataInterface'
       }else if(ele.name == '4'){
          ele.contentName  = 'dataKinship'
       }else if(ele.name == '5'){
          ele.contentName  = 'dataQualty'
       }else if(ele.name == '6'){
          ele.contentName  = 'dataDesen'
       }else if(ele.name == '7'){
          ele.contentName  = 'datasetConfig'
       }else if(ele.name == '8'){
          ele.contentName  = 'dataModel'
       }
       return ele
     })
     this.activeName = this.firstTab[0].name
     this.contentName = this.firstTab[0].contentName
     console.log(this.activeName);
   })
},