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

(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.mfbz.cn/a/65451.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++笔记之两个类的实例之间传递参数的各种方法

C笔记之两个类的实例之间传递参数的各种方法 code review! 文章目录 C笔记之两个类的实例之间传递参数的各种方法1.构造函数参数传递2.成员函数参数传递3.友元函数4.友元类5.传递指针或引用6.静态成员变量7.静态成员函数8.全局变量或命名空间9.回调函数和函数指针10.观察者模…

pg实现月累计

获取每月累计数据&#xff1a; ​​​ SELECT a.month, SUM(b.total) AS total FROM ( SELECT month, SUM(sum) AS total FROM ( SELECT to_char(date("Joinin"),YYYY-MM) AS month , COUNT(*) AS sum FROM "APP_HR_Staff_Basic_Info" GROUP BY month ) …

做接口测试如何上次文件

在日常工作中&#xff0c;经常有上传文件功能的测试场景&#xff0c;因此&#xff0c;本文介绍两种主流编写上传文件接口测试脚本的方法。 首先&#xff0c;要知道文件上传的一般原理&#xff1a;客户端根据文件路径读取文件内容&#xff0c;将文件内容转换成二进制文件流的格式…

Vue3 第五节 一些组合式API和其他改变

1.provide和inject 2.响应式数据判断 3.Composition API的优势 4.新的组件 5.其他改变 一.provide和inject 作用&#xff1a;实现祖与后代组件间通信 套路&#xff1a;父组件有一个provide选项来提供数据&#xff0c;后代组件有一个inject选项来开始使用这些数据 &…

APP外包开发的学习流程

学习iOS App的开发是一项有趣和富有挑战性的任务&#xff0c;是一个不断学习和不断进步的过程。掌握基础知识后&#xff0c;不断实践和尝试新的项目将使您的技能不断提升。下面和大家分享一些建议&#xff0c;可以帮助您开始学习iOS App的开发。北京木奇移动技术有限公司&#…

hcip的重发布实验(1)

题目 拓扑图 IP地址配置 R1 < Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]sysname r1 [r1]int l0 [r1-LoopBack0]ip add 1.1.1.1 24 [r1-LoopBack0]int g0/0/0 [r1-GigabitEthernet0/0/0]ip add 12.1.1.1 24 Aug 8 2023 21:28:29-08:00 r1 %%0…

升级node版本后vue2的项目node-sass、sass-loader安装报错(14.x升级到16.x)

node升级到16.x版本后&#xff0c;对应的node-sass需要升级到^6.0.0&#xff0c;此时sass-loader的版本需要升级到10.2.0以上 &#xff0c;具体对应版本规则可参考链接: https://github.com/webpack-contrib/sass-loader/releases?page3 vue2通过vue/cli创建的项目&#xff0…

super父类 事物

一个没有事物的方法。 调用他的父类里有事物的方法。 无论this 和 super 都会让父类事物方法没有事物。 如果写了super.class 文件里面&#xff0c;就是super调用。 如果没写&#xff0c;就是this调用&#xff0c;坑爹 测试&#xff0c;把父类注入&#xff0c;事物才生效。

搭建本地开发服务器

搭建本地开发服务器 :::warning 注意 在上一个案例的基础上添加本地开发服务器&#xff0c;请保留上个案例的代码。如需要请查看 Webpack 使用。 ::: 搭建本地开发服务器这一个环节是非常有必要的&#xff0c;我们不可能每次修改源代码就重新打包一次。这样的操作是不是太繁琐…

ArcGIS Pro基础:【划分】工具实现等比例、等面积、等宽度划分图形操作

本次介绍【划分】工具的使用&#xff0c;如下所示&#xff0c;为该工具所处位置。使用该工具可以实现对某个图斑的等比例面积划分、相等面积划分和相等宽度划分。 【等比例面积】&#xff1a;其操作如下所示&#xff0c;其中&#xff1a; 1表示先选中待处理的图斑&#xff0c;2…

无人机光伏巡检系统的全新作用解析,提升效率保障安全

随着光伏发电行业的快速发展&#xff0c;光伏电站的规模越来越大&#xff0c;光伏维护和巡检成为一个巨大的挑战。为解决传统巡检方法的低效率和安全风险问题&#xff0c;无人机光伏巡检系统应运而生&#xff0c;并成为提升光伏巡检效率和保障安全的利器。 首先&#xff0c;无人…

尚硅谷张天禹Vue2+Vue3笔记(待续)

简介 什么是Vue&#xff1f; 一套用于构建用户界面的渐进式JavaScript框架。将数据转变成用户可看到的界面。 什么是渐进式&#xff1f; Vue可以自底向上逐层的应用 简单应用:只需一个轻量小巧的核心库 复杂应用:可以引入各式各样的Vue插件 Vue的特点是什么&#xff1f; 1.采…

常用抓包工具

Fiddler Fiddler 是一个很好用的抓包工具&#xff0c;可以用于抓取http/https的数据包&#xff0c;常用于Windows系统的抓包&#xff0c;它有个优势就是免费 Charles Charles是由JAVA开发的&#xff0c;可以运行在window Linux MacOS&#xff0c;但它是收费的&#xff0c;和…

怎么在JMeter中的实现关联

我们一直用的phpwind这个系统做为演示系统, 如果没有配置好的同学, 请快速配置之后接着往下看哦. phpwind发贴时由于随着登陆用户的改变, verifycode是动态变化的, 因此需要用到关联. LoadRunner的关联函数是reg_save_param, Jmeter的关联则是利用后置处理器来完成. 在需要查…

Spark官方调优三部曲之三:其它优化思路

前言 前面介绍了关于spark性能调优两个最重要的点: 数据序列化内存调优这两个方向都进行调优后,如果想进一步继续优化你的程序,可以参考下面的思路。 设置合理的并行度 除非将每个操作的并行级别设置得足够高,否则集群资源不会得到充分利用。Spark根据每个文件的大小自动…

互联网电影购票选座后台管理系统源码开发

搭建一个互联网电影购票选座后台管理系统需要进行以下步骤&#xff1a; 1. 需求分析&#xff1a;首先要明确系统的功能和需求&#xff0c;包括电影列表管理、场次管理、座位管理、订单管理等。 2. 技术选型&#xff1a;选择适合的技术栈进行开发&#xff0c;包括后端开发语言…

kettle之Switch/Case 插件

Switch/Case 插件存在于转换中&#xff0c;用于进行分支选择 插件运行下一步的表输入中执行hivesql需选上下面红色方框的&#xff0c;否则Switch/Case分支不生效!

Node.js |(三)Node.js API:path模块及Node.js 模块化 | 尚硅谷2023版Node.js零基础视频教程

学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程&#xff0c;nodejs新手到高手 文章目录 &#x1f4da;path模块&#x1f4da;Node.js模块化&#x1f407;介绍&#x1f407;模块暴露数据⭐️模块初体验⭐️暴露数据 &#x1f407;导入文件模块&#x1f407;导入文件夹的…

【二叉树】105. 从前序与中序遍历序列构造二叉树

链接: 105. 从前序与中序遍历序列构造二叉树 先序 能够确定谁是根 中序 知道根之后&#xff0c;能够确定左子树和右子树的范围 例子 根据先序的性质&#xff08;根左右&#xff09;&#xff0c;能够确定根&#xff0c;我们就能够从总序中找出根节点&#xff08;rooti所在…

C语言刷题------(2)

C语言刷题——————&#xff08;2&#xff09; 刷题网站&#xff1a;题库 - 蓝桥云课 (lanqiao.cn) First Question&#xff1a;时间显示 题目描述 小蓝要和朋友合作开发一个时间显示的网站。 在服务器上&#xff0c;朋友已经获取了当前的时间&#xff0c;用一个整数表…
最新文章