需求描述: el-tabs页签下展示的内容为动态内容, 且tab数量是可配置的.
- 效果:
- 配置页面:
vue代码:
关键是component 标签的应用
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane :label="type.name" :name="type.reportType" v-for="(type, index) in typeList" :key="index" :lazy="true">
<!--动态组件实现-->
<component :is="type.reportType" :title="type.name" :reportType="type.reportType" :templateId="type.templateId" ref="type.reportType" :queryParams="queryParams"></component>
</el-tab-pane>
</el-tabs>