el-tabs怎么动态加载组件？现在我是这么写的，但是初次进入页面还是觉得有点卡顿。有没有方式可以优化一下？
<template>
<div>
<el-tabs v-model="activeName" class="my-tabs" type="card" @tab-click="tabClick">
<el-tab-pane label="A" name="DraftNewList"> </el-tab-pane>
<el-tab-pane label="B" name="CheckWorkingPaperList"> </el-tab-pane>
<el-tab-pane label="C" name="CheckDefectsSummaryList"> </el-tab-pane>
</el-tabs>
<component :is="activeName" :ref="activeName"></component>
</div>
</template>
import DraftNewList from '@/views/modules/internal-control-management/headquarters-internal-control-inspection/draft-new/draft-new-list'
import CheckWorkingPaperList from '@/views/modules/internal-control-management/headquarters-internal-control-inspection/check-working-paper/check-working-paper-list'
import CheckDefectsSummaryList from '@/views/modules/internal-control-management/headquarters-internal-control-inspection/check-defects-summary/check-defects-summary-list'
export default {
name: 'headquarters-internal-control-inspection',
components: { CheckDefectsSummaryList, CheckWorkingPaperList, DraftNewList },
data() {
return {
activeName: 'DraftNewList'
}
},
methods: {
tabClick() {
this.$nextTick(() => {
this.$refs[this.activeName].loadData()
})
}
}
}
