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

还算善良_2024-06-13 20:26

最近做了一个功能，后端根据配置信息，动态返回一个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>