建设静态网站,wordpress 相册浏览器,wordpress 图片缩略图不显示,超炫酷个人引导页源码最近做了一个功能#xff0c;后端根据配置信息#xff0c;动态返回一个tabList#xff0c;其中结构是ListString,Object tabList; map里面的数据是 label、value 页面需要根据tablist动态渲染组件#xff08;不同的tab都使用了组件进行了封装#xff09;
实现效果…最近做了一个功能后端根据配置信息动态返回一个tabList其中结构是ListString,Object tabList; map里面的数据是 label、value 页面需要根据tablist动态渲染组件不同的tab都使用了组件进行了封装
实现效果 直接看代码
template a-tabs v-model:activeKeyactiveModule changehandleTabChange v-ifbillId tabList.length 0 a-tab-pane v-for(tab, index) in tabList :keytab.label :tabtab.label !-- 使用动态组件来根据 tab.key 渲染不同的组件 -- //我这里直接用的label的中文进行匹配 可以根据自己需要更改component :isgetComponentName(tab.label) :billIdbillId v-ifactiveModule tab.label / /a-tab-pane /a-tabs
/template script // 导入所有需要的组件 import Invoice from ./tabs/invoiceimport BankReceipt from ./tabs/bankReceiptimport Dispatch from ./tabs/dispatchimport PurchaseOrder from ./tabs/purchaseOrderimport ReceiptOrder from ./tabs/receiptOrderimport RequestOrder from ./tabs/requestOrderimport TrainApplication from ./tabs/trainApplicationimport 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.activeModulethis.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
