(vue)获取对象的键遍历,同时循环el-tab页展示key及内容

news2024/11/25 18:26:40

(vue)获取对象的键遍历,同时循环el-tab页展示key及内容


效果:
在这里插入图片描述
在这里插入图片描述

数据结构:

"statusData": {
        "订购广度": [                                  
            {
                "id": 11, 
                "ztName": "广",                       
                ... 
            }, 
            {
                "id": 12,  
                "ztName": "较广", 
                ...
            }, 
        ],
        "需求强度": [
            {
                "id": 21,  
                "ztName": "强", 
                ...
            }, 
            {
                "id": 22,  
                "ztName": "弱", 
                ...
            }, 
        ],
        ...
   }     

代码:

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="状态查看" name="first">
    <el-tabs type="border-card">
      // Object.keys(statusData) 获取对象的键(key): ['订购广度', '需求强度', '动销速度', '市场状态', '贡献度', '异常信息']
      <el-tab-pane :label="item" v-for="(item,index) in Object.keys(statusData)" :key="index">
        <el-table
          :data="statusData[item]"
          ...
        >
          <el-table-column type="index" label="序号" align="center" />
          ...
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
  <el-tab-pane label="状态编辑" name="second">
     ...
  </el-tab-pane>
</el-tabs>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/848246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用Word转PDF转换器在线工具?在线Word转PDF使用方法

Word转PDF转换器在线&#xff0c;是一种方便快捷的工具&#xff0c;可帮助您在不需要下载任何软件的情况下完成此任务。无论您是需要在工作中共享文档&#xff0c;还是将文件以PDF格式保存以确保格式不变&#xff0c;都可以依靠这款在线工具轻松完成转换。那么如何使用Word转PD…

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览

使用Openoffice或LibreOffice实现World、Excel、PPTX在线预览 预览方案使用第三方服务使用前端库转换格式 jodconverterjodconverter概述主要特性OpenOfficeLibreOffice jodconverter的基本使用添加依赖配置创建DocumentConverter实例上传与转换预览启动上传与预览World 与Spri…

海外跨境购物商城汇率自动更新系统开发

要搭建一个海外跨境购物商城多货币汇率自动更新系统&#xff0c;您可以按照以下步骤进行&#xff1a; 1. 选择合适的电子商务平台&#xff1a;选择一款适合海外跨境购物的电子商务平台。 2. 确定支付方式&#xff1a;选择支持多种货币支付的支付网关。确保支付网关支持自动汇…

springboot(1)

精要&#xff1a; 自动配置&#xff1a;针对很多Spring应用程序常见的应用功能&#xff0c;Spring Boot能自动提供相关配置。 起步依赖&#xff1a;告诉Spring Boot需要什么功能&#xff0c;它就能引入需要的库。 命令行界面&#xff1a;这是Spring Boot的可选特性&#xff0…

基于DETR (DEtection TRansformer)开发构建MSTAR雷达影像目标检测系统

关于DETR相关的实践在之前的文章中很详细地介绍过&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《DETR (DEtection TRansformer)基于自建数据集开发构建目标检测模型超详细教程》 《书接上文——DETR评估可视化》 基于MSTAR雷达影像数据开发构建目标检测系统&am…

力扣279.完全平方数(动态规划)

class Solution { public:int numSquares(int n) {vector<int> f(n 1);for (int i 1; i < n; i) {int minn INT_MAX;for (int j 1; j * j < i; j) {minn min(minn, f[i - j * j]); //上一次的 & 当前数可以找到一个新的更大的平方}f[i] minn 1; }…

分布式应用:Zabbix自定义监控模板

目录 一、理论 1.zabbix监控模板 2.在客户端创建自定义 key 3.在 Web 页面创建自定义监控项模板 4.设置邮件报警 二、实验 1.在客户端创建自定义 key 2.在 Web 页面创建自定义监控项模板 3.设置邮件报警 三、问题 1.查看动作发送邮件失败 四、总结 一、理论 1.zab…

功能上新|全新GPU性能优化方案

GPU优化迎来了全新的里程碑&#xff01;我们深知移动游戏对高品质画面的追求日益升温&#xff0c;因此UWA一直着眼于移动设备GPU性能优化&#xff0c;以确保您的游戏体验尽善尽美。然而&#xff0c;不同GPU芯片之间的性能差异及可能导致的GPU瓶颈问题&#xff0c;让优化工作变得…

Hybrid技术的下一站是什么?

Hybrid这个词&#xff0c;在App开发领域&#xff0c;相信大家都不陌生。Hybrid App是指介于web-app、native-app这两者之间的app&#xff0c;它虽然看上去是一个Native App&#xff0c;但只有一个UI WebView&#xff0c;里面访问的是一个Web App。Hybrid在移动领域的发展&#…

低代码平台——需求和技术发展的产物

前言&#xff1a;低代码平台是需求和技术发展的必然产物&#xff0c;从开发方式、开发门槛、开发效率各层面上&#xff0c;跟传统的开发方式有根本区别&#xff0c;是业界已达成共识的新技术方向。 一、低代码平台起源 从2016年开始&#xff0c;低代码突然进入快速发展阶段&…

无涯教程-Perl - flock函数

描述 该函数支持使用系统flock(),fcntl()锁定或lockf()在指定的FILEHANDLE上锁定文件。使用的确切实现方式取决于系统支持的功能。 OPERATION是此处定义的static 值之一。 Operation Result LOCK_SH Set shared lock. LOCK_EX Set exclusive lock. LOCK_UN Unlock specifi…

用Vue实现页面访问拦截

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 页面访问拦截 1.创建axios实例 2.添加拦截器 3.全局前置守卫 可选的第三个参数 next 总结&#xff1a…

JDBC概念与类的详解

JDBC 文章目录 JDBC一、概念及入门二、各个类详解1、DriverManager&#xff1a;驱动管理对象&#xff08;1&#xff09;注册驱动&#xff08;2&#xff09;获取数据库连接 2、Connection&#xff1a;数据库连接对象&#xff08;1&#xff09;获取执行sql的对象&#xff08;2&am…

碎片拼接恢复XenServer虚拟机中SQLServer数据库的数据恢复案例

服务器数据恢复环境&#xff1a; 某单位一台Dell服务器上使用RAID卡搭建了一组由4盘RAID10。 服务器安装的XenServer虚拟化操作系统&#xff0c;虚拟机采用的Windows Server操作系统。 共系统盘和数据盘两个虚拟机磁盘&#xff0c;上层部署的是Web服务器&#xff08;ASP SQLSe…

实施高级存储功能

实施高级存储功能 使用Stratis管理分层存储 Stratis 适用于Linux的本地存储管理解决方案。旨在提供更便利的方式执行存储的初始配置&#xff0c;对存储配置进行修改&#xff0c;并使用高级存储功能。 Stratis以管理物理存储设备池的服务形式运行&#xff0c;并透明地为新创…

基于机器视觉和倾角传感器的位姿检测系统及验证

悬臂式掘进机位姿检测是综掘工作面自动化的基础和前提。只有获取稳定可靠的掘进机实时位姿&#xff0c;才能够在此基础上进行综掘工作面自动化、智能化改造工作。 为了提高井下综掘工作面的生产效率&#xff0c;西安电子科技大学机电工程学院的研究团队提出一种基于机器视觉和…

[免费在线] 将 PDF 转换为 Excel 或 Excel 转换为 PDF | 5 工具

有了免费的在线 PDF 转换器&#xff0c;您可以轻松免费在线将 PDF 转换为 Excel 或 Excel 转换为 PDF。这篇文章为您筛选了 5 个最常用的工具。要从存储介质恢复错误删除或丢失的 PDF 文档、Excel 电子表格、Word 文件或任何其他文件&#xff0c;您可以使用免费的数据恢复程序 …

力扣62.不同路径(动态规划)

/*** 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。* 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。* 问总共有多少条不同的路径&#xff1f; *…

【生物医学】应激(应激反应)全身适应综合征

最近在探索疲劳、负荷、应激方面的底层发生机制&#xff0c;遂整理了一些相关内容&#xff0c;以脑图方式呈现。本文以生物医学向为主。 OK&#xff0c;开始基础介绍&#xff1a;应激 (stress)是指在收到外部或内部、心理社会刺激下的非特异性适应反应。 本文主要收集整理了相…

BLIP2

BLIP2的任务是基于已有的固定参数的图像encoder和语言大模型&#xff08;LLM&#xff09;搭建一个具有图像理解能力的图文模型&#xff0c;输入是图像和文本&#xff0c;输出是文本。 BLIP2基于Q-Former结构&#xff0c;如下图所示。Q-Former包含图像transformer和文本transfo…