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

最近做了一个功能,后端根据配置信息,动态返回一个tabList,其中结构是List<Map<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) {  
          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>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-13 16:32:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-13 16:32:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-13 16:32:03       87 阅读
  4. Python语言-面向对象

    2024-06-13 16:32:03       96 阅读

热门阅读

  1. 算法第9章 图算法设计

    2024-06-13 16:32:03       21 阅读
  2. define与typedef的区别和使用

    2024-06-13 16:32:03       31 阅读
  3. 图片角度调整 适配缩放 transform scale rotate

    2024-06-13 16:32:03       30 阅读
  4. 微服务——参数校验

    2024-06-13 16:32:03       25 阅读
  5. linux 环境下动态链接库试验

    2024-06-13 16:32:03       29 阅读
  6. 如何通过Python爬虫提升电商数据分析效率

    2024-06-13 16:32:03       35 阅读
  7. 新需求:实现一个自动运维部署工具

    2024-06-13 16:32:03       27 阅读
  8. 编程里len是什么意思:深度解析与应用探讨

    2024-06-13 16:32:03       27 阅读