el-tabs中有多个el-tab-pane时的简写

当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()
    }
  }