当el-tabs中有多个el-tab-pane时，如果全部在一个组件，代码量会很大，有如下方法可以将代码分开
1、组件同级创建配置文件config.js 如：
const componentsList = () => {
return [
{
id: 'first',
refName: 'first',
component: () => import('@/views/workflow/views/details/views/first.vue'),
tab: 'first'
},
{
id: 'second',
refName: 'second',
component: () => import('@/views/workflow/components/second.vue'),
tab: 'second'
}
]
}
export const compoModules = () => {
return componentsList.call()
}
2、在组件中引入
<el-tabs class="table-tabs" v-model="activeTab">
<template v-for="(item, index) in TabList">
<el-tab-pane :label="item.name" :name="item.key" :key="index" lazy>
<template v-for="(compo, index) in componentList">
<component
v-if="compo.tab === item.key && compo.tab === activeTab"
:key="index"
:is="compo.component"
:ref="compo.refName"
:refName="compo.refName"
></component>
</template>
</el-tab-pane>
</template>
</el-tabs>
import { compoModules } from './config'
computed: {
componentList() {
return compoModules()
}
}
