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

最近做了一个功能,后端根据配置信息,动态返回一个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>
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python