Vue动态组件应用

最新推荐文章于 2024-04-09 09:40:05 发布

Kevin-anycode

最新推荐文章于 2024-04-09 09:40:05 发布

阅读量166

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/lk1985021/article/details/125336848

版权

需求描述: 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>