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>