Vue根据后端返回的tabList动态渲染组件信息

最近做了一个功能,后端根据配置信息,动态返回一个tabList,其中结构是List<String,Object> tabList; map里面的数据是 label、value 页面需要根据tablist动态渲染组件(不同的tab都使用了组件进行了封装)
实现效果

在这里插入图片描述

直接看代码
<template>  <a-tabs v-model:activeKey="activeModule" @change="handleTabChange" v-if="billId && tabList.length > 0">  <a-tab-pane  v-for="(tab, index) in tabList"  :key="tab.label"  :tab="tab.label"  >  <!-- 使用动态组件来根据 tab.key 渲染不同的组件 -->  //我这里直接用的label的中文进行匹配 可以根据自己需要更改<component  :is="getComponentName(tab.label)"  :billId="billId"  v-if="activeModule === tab.label"  />  </a-tab-pane>  </a-tabs>  
</template>  
<script>  // 导入所有需要的组件  import Invoice from './tabs/invoice'import BankReceipt from './tabs/bankReceipt'import Dispatch from './tabs/dispatch'import PurchaseOrder from './tabs/purchaseOrder'import ReceiptOrder from './tabs/receiptOrder'import RequestOrder from './tabs/requestOrder'import TrainApplication from './tabs/trainApplication'import TravelApplication from './tabs/travelApplication' // ... 其他组件的导入  export default {  components: {  Invoice,BankReceipt,Dispatch,PurchaseOrder,ReceiptOrder,RequestOrder,TrainApplication,TravelApplication// ... 其他组件的注册  },  data() {  return {  billId: null, // 假设这个值会在某个地方被设置  tabList: [  { key: '0', label: '发票' },  { key: '1', label: '银行回单' },  ],  //具体的数据根据自己需要从接口获取activeModule: '发票', // 初始激活的标签页  };  },  methods: {  getTabList(){//1、从后端接口获取tabList....//2、初始化默认激活tab为第一个this.activeModule=this.tabList[0].label},handleTabChange(key) {  // 处理标签页切换的逻辑  this.activeModule = key;  },  getComponentName(key) {  // 根据 key 返回对应的组件名  switch (key) {  switch (key) {case '发票':return 'Invoice';case '银行回单':return 'BankReceipt';case '请款单':return 'RequestOrder';case '验收单':return 'ReceiptOrder';case '差旅申请':return 'TravelApplication';case '培训申请':return 'TrainApplication';case '公出派遣':return 'Dispatch';case '采购单':return 'PurchaseOrder';// ... 其他组件的匹配  default: return 'DefaultComponent'; // 返回一个默认组件名  }  },  },  
};  
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/24061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

都给我冲!微信视频号下载助手可快速提取视频号视频,已测可用

不少视频内容创作者在写文案&#xff0c;以及收集素材的时候发现微信视频号的视频无法下载&#xff0c;该怎么办呢&#xff1f; 都给我冲&#xff01;已实测好用的视频号下载助手&#xff0c;无论是个人或者企业都可以快速保存视频号视频。 你也不用担心自己是用到什么设备&am…

Xilinx的Aurora8B10B ip原理讲解(高速收发器十六)

点击进入高速收发器系列文章导航界面 前文讲解了Aurora 8B/10B协议的一些基础知识&#xff0c;本文对Xilinx的Aurora 8B/10B IP进行讲解&#xff0c;该IP在Aurora 8B/10B的基础之上还完成了字对齐等等操作&#xff0c;开放给用户的端口有axi_full或axi_stream两种格式。 相应的…

17.3 命令行-POSIX特性、安装与分享

1. POSIX特性 在Linux和macOS系统中&#xff0c;大多数命令行工具都要求以推荐标准POSIX指定的方式传递命令行参数。 POSIX即UNIX可移植操作系统接口(Portable Operating System Interface of UNIX)是一套标准&#xff0c;旨在确保操作系统之间彼此兼容。 很多开发人员也希望…

沃尔沃Volvo EDI:运输标签测试流程

对接Volvo的EDI项目中&#xff0c;需要按照以下流程完成测试&#xff1a; 1.创建EDI连接并且传输第一个交付计划 2.请求发货通知以及运输标签 3.反馈关于发货通知以及运输标签的细节 4.使用生产数据进行最终的验证 在Volvo EDI项目案例中&#xff0c;详细介绍了有关连接测试以…

25届最近5年南京航空航天大学自动化考研院校分析!

南京航空航天大学 一、学校学院专业简介 二、考试科目指定教材 1、考试科目介绍 2、指定教材介绍 三、近5年考研分数情况 以下为南京航空航天大学&#xff0c;自动化学院近几年的考研分数情况。 以下为南京航空航天大学&#xff0c;航天学院近几年的考研分数情况。 以下为南京…

React -- memo允许你的组件在 props 没有改变的情况下跳过重新渲染。

memo(Component, arePropsEqual?) 使用 memo 将组件包装起来&#xff0c;以获得该组件的一个 记忆化 版本。通常情况下&#xff0c;只要该组件的 props 没有改变&#xff0c;这个记忆化版本就不会在其父组件重新渲染时重新渲染。但 React 仍可能会重新渲染它&#xff1a;记忆化…

内容产品运营方案业务架构解析与实践探索

### 背景 在信息爆炸的时代背景下&#xff0c;内容产品运营成为各行各业竞争的重要环节。构建合理的内容产品运营方案业务架构&#xff0c;能够帮助企业更好地管理内容生产、推广和变现&#xff0c;提升品牌影响力和商业价值。 ### 业务架构设计 #### 1. 内容生产与管理 建立…

漏洞挖掘 | 记一次信息泄露到登入后台

这次是项目上遇到的一个洞&#xff0c;打开页面是一个红红的登录页面 这里就不放图了&#xff0c;浓浓的红色气息~ 老样子抓登录包 虽然是明文传输但是爆破弱口令无果 f12大法&#xff0c;审计源代码&#xff0c;在其中一个js文件中发现了这个接口 拼接URL进行访问 感觉有点东…

移动性:mobility

移动性管理原理 什么是移动性 一些术语 移动性管理办法 让网络&#xff08;路由器&#xff09;处理移动性&#xff1a;路由器通过常规路由表发送交换节点的永久地址 路由器互相交换各自移动节点位置信息&#xff0c;路由系统定期会通告自己这边新移动过来的移动设备信息端系统…

【Linux】系统优化:一键切换软件源与安装Docker

引言 在Linux系统安装完成后&#xff0c;进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本&#xff1a;LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…

【Test 58】 Qt信号与槽机制! 高频的Qt 知识点!

文章目录 1.Qt 信号与槽机制原理&#xff08;Signal & Slot&#xff09;2. QObject 类 connect 的介绍3. 信号与槽机制连接方式4. 信号和槽机制优势及其效率&#xff1a;5. 信号与槽机制应用 1.Qt 信号与槽机制原理&#xff08;Signal & Slot&#xff09; &#x1f42…

【Java笔记】第9章:三个修饰符

前言1. abstract&#xff08;抽象的&#xff09;2. static&#xff08;静态的&#xff09;3. final&#xff08;最终的&#xff09;结语 上期回顾:【Java笔记】第8章&#xff1a;面向对象的三大特性&#xff08;封装、继承、多态&#xff09; 个人主页&#xff1a;C_GUIQU 归属…

【GUI软件】小红书搜索结果批量采集,支持多个关键词同时抓取!

文章目录 一、背景介绍1.1 爬取目标1.2 演示视频1.3 软件说明 二、代码讲解2.1 爬虫采集模块2.2 软件界面模块2.3 日志模块 三、获取源码及软件 一、背景介绍 1.1 爬取目标 您好&#xff01;我是马哥python说 &#xff0c;一名10年程序猿。 我用python开发了一个爬虫采集软件…

Apache Doris 基础 -- 数据表设计(模式更改)

用户可以通过schema Change操作修改现有表的模式。表的模式主要包括对列的修改和对索引的修改。这里我们主要介绍与列相关的Scheme更改。对于与索引相关的更改&#xff0c;可以查看数据表设计/表索引&#xff0c;查看每个索引的更改方法。 1、术语 基本表&#xff08;Base Ta…

IMX6ULL kernel移植

1.环境说明 编译主机Debian 12交叉编译工具arm-none-linux-gnueabihf-gcc(gcc version 12.3.1 20230626)kernel版本lf-6.6.3-1.0.02.官方默认版本说明 默认官方版本的kernel是可以运行的,直接按照下面的命令编译即可 ###清除掉默认配置make ARCH=arm CROSS_COMPILE=arm-no…

什么是广告联盟变现

广告联盟变现&#xff0c;作为一种连接广告主与各类媒体平台的机制&#xff0c;正展现出强大的生命力和影响力。它为拥有流量资源的一方提供了将其转化为实际经济收益的有效途径。通过广告联盟&#xff0c;媒体平台可以与众多广告主建立合作关系&#xff0c;获取多样化的广告内…

6月13日在线研讨会 | 多产品多流程多团队的ALM选择方案

随着汽车产业步入“软件定义汽车”时代&#xff0c;传统汽车产业的硬件中心模式逐渐被软件与服务的核心地位所取代&#xff0c;这是一场对汽车设计、制造及运营的全方位重塑。在这一转型过程中&#xff0c;如何高效管理汽车的整个生命周期成为了一项全新挑战。在此背景下&#…

谷歌医疗大模型登Nature,Med-PaLM重磅揭秘!AI医生成绩比肩人类

5月I/O大会上&#xff0c;Med-PaLM 2重磅升级&#xff0c;甚至达到了专家水准。 今天&#xff0c;谷歌揭秘微调后的Med-PaLM&#xff0c;同样在医学问题上一骑绝尘。 研究成果已登Nature。 论文地址&#xff1a;https://www.nature.com/articles/s41586-023-06291-2 这项研究…

史上最强 AI 翻译诞生了!拳打谷歌,脚踢 DeepL

CoT 推理范式 默认情况下&#xff0c;大语言模型通常是直接给出问题的最终答案&#xff0c;中间推理过程是隐含的、不透明的&#xff0c;无法发挥出大模型最极致的理解能力。如果你用它来充当翻译&#xff0c;可能效果和传统的机器翻译也差不了太多。 如果我们给大模型设计一…

智能引领医疗新纪元:RFID技术在医疗器械管理中的高端应用

智能引领医疗新纪元&#xff1a;RFID技术在医疗器械管理中的高端应用 随着医疗技术的快速发展&#xff0c;医疗器械在医疗行业中扮演着至关重要的角色。然而&#xff0c;如何有效地管理这些医疗器械&#xff0c;确保其安全、准确、及时地服务于患者&#xff0c;一直是医疗机构…