<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in elTabPaneList" :key="item.name" :name="item.name" :label="item.label"> <component :is="item.name" :key="item.name" v-if="activeName === item.name"></component> </el-tab-pane> </el-tabs>
elTabPaneList: [ { label: '详情概览', name: 'detailInfo' }, { label: '虚拟网卡', name: 'virtualCard' }, { label: '挂载虚拟磁盘', name: 'disk' }, { label: '事件查询', name: 'dataEvent' }, { label: '操作任务', name: 'dataTask' } ]
components: {
detailInfo,
virtualCard,
disk,
dataEvent,
dataTask
},
vue.extend用法,局部组件定义,需要挂载dom元素上