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