(vue)键值对结构数据展示

news2024/9/28 17:27:20

(vue)键值对结构数据展示


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


数据结构:

this.formInline.algorithmText = [
	{
	  algorithmParameters: {
	    参数名1: "111",
	    参数名2: "121,122",
	  },
	  algorithmName: "算法1",
	  algorithmId: 9,
	},
	{
	  algorithmParameters: {
	    参数名1: "211",
	    参数名2: "221,222",
	  },
	  algorithmName: "算法2",
	  algorithmId: 11,
	},
];

展示:

<div v-for="(ele,index) of formInline.algorithmText" :key="index">
  <div>
    <el-form-item :label="'设置'+ele.algorithmName+'参数:'"></el-form-item>
  </div>
  <el-form-item
    v-for="(item,index) in Object.keys(ele.algorithmParameters)" //重点
    :key="index"
    :label="item"
    class="descInput"
  >
    <el-input
      v-model="ele.algorithmParameters[item]" //重点
      placeholder="请输入"
      @change="paramsChange"
    /> 
  </el-form-item>
</div>

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

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

相关文章

Android安卓读写低频EM4469卡源码

本示例使用的发卡器&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.…

Qt通用属性工具:随心定义,随时可见(三)

传送门: 《Qt通用属性工具:随心定义,随时可见(一)》 《Qt通用属性工具:随心定义,随时可见(二)》 《Qt通用属性工具:随心定义,随时可见(三)》 一、效果展示 本文将展示的是一个源于Qt但是却有些年头的Qt属性浏览工具。支持交互式编辑和查阅对象属性。 这可不就是妥…

机器学习--人工智能概述

人工智能概述 入门人工智能&#xff0c;了解人工智能是什么。为啥发展起来&#xff0c;用途是什么&#xff0c;是最重要也是最关键的事情。大致有以下思路。 人工智能发展历程机器学习定义以及应用场景监督学习&#xff0c;无监督学习监督学习中的分类、回归特点知道机器学习…

产品经理学习-产品运营《用户运营策略》

⽤户画像与⽤户运营策略 什么是用户画像 对产品运营而言&#xff0c;用户画像就是对用户的各种特征贴上标签通过这些标签将用户分成不同的用户群体 为用户提供有针对性的服务。 制作用户画像是为了专注和精准 使产品的服务对象更加聚焦&#xff0c;更加专注&#xff1b;根据产…

NIFI 2.0.0版本HTTPS访问部署

1. 相关环境 服务器&#xff1a;centos JDK&#xff1a;jdk21 NIFI: nifi-2.0.0-M1 2. 下载NIFI 下载NIFI https://nifi.apache.org/download/ 将文件上传至服务器指定目录&#xff0c;解压缩 修改 bin 目录下的脚本文件 ​ 注意: nifi 2.0.0 版本需要jdk21&#xff0c;所…

C++ 二叉树OJ题

目录 1、606. 根据二叉树创建字符串 2、102. 二叉树的层序遍历 3、107. 二叉树的层序遍历 II 4、236. 二叉树的最近公共祖先 5、JZ36 二叉搜索树与双向链表 6、105. 从前序与中序遍历序列构造二叉树 7、106. 从中序与后序遍历序列构造二叉树 8、144. 二叉树的前序遍历…

pdf怎么查看?6个不能错过的软件!

PDF&#xff0c;作为一种常用的文件格式&#xff0c;已经成为了我们工作、学习中的必备工具。然而&#xff0c;对于许多新手来说&#xff0c;如何查看和编辑PDF文件却是一个不小的挑战。今天&#xff0c;我们就来为大家详细介绍一下如何查看和编辑PDF文件&#xff0c;以及一些必…

从法律的角度看待项目前期可行性研究的必要性

前言 在司法实践中&#xff0c;很多纠纷展现出来的问题是项目提供方没有按照合同约定履行发生违约的情况&#xff0c;例如逾期交付、项目不符合约定标准等等&#xff0c;但是这些情况发生的原因是各不相同的&#xff0c;其中有一类纠纷的发生却是从一开始就埋下了风险的种子&a…

2.0-学成在线内容管理

内容管理模块 1.需求 1.1 业务流程 内容管理的业务由教学机构人员和平台的运营人员共同完成。 教学机构人员的业务流程如下&#xff1a; 1、登录教学机构。 2、维护课程信息&#xff0c;添加一门课程需要编辑课程的基本信息、上传课程图片、课程营销信息、课程计划、上传课程…

深入详解使用 RabbitMQ 过程中涉及到的多个细节问题(面试可用)

目录 1、基础类问题 2、cluster 相关问题 3、综合性问题 4、参考资料 C软件异常排查从入门到精通系列教程&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff09;https://blog.csdn.net/chenlycly/article/details/125529931C/C基础与进阶&…

OB OCP工具

文章目录 OCP产品架构OCP核心功能集群管理-集群拓扑图告警管理 OCP OCP&#xff08;OceanBase Cloud Platform&#xff09;是企业级数据库管理平台OceanBase 云平台&#xff08;OceanBase Cloud Platform&#xff0c;OCP&#xff09;是以 OceanBase 为核心的企业级数据库管理平…

外汇天眼:加拿大监管机构提出了关于持有加密资产的公共投资基金的规定

加拿大证券管理局&#xff08;CSA&#xff09;是由加拿大各省金融市场监管机构组成的国家机构。他们已发布了一组旨在征求意见的拟议监管要求&#xff0c;适用于寻求投资加密资产的公共投资基金。 Stan Magidson&#xff0c;CSA主席兼艾伯塔证券委员会主席兼首席执行官表示&…

无货源跨境电商到底应该怎么做,新手必看

如今&#xff0c;跨境电商无疑已经成为了一个热门的创业领域&#xff0c;但对于一些新手来说&#xff0c;面临的一个主要挑战是如何处理产品的货源问题。下面我就和大家分享一下无货源跨境电商的基本概念以及一些新手可以采取的策略和步骤&#xff0c;帮助大家在这个领域取得成…

UE4 添加按键输入事件 并在蓝图中使用按键输入节点

绑定按键 选择Edit/ProjectSettings/Engine/Input 在bindings中可以选择添加ActionMappings或则AxisMappings ActionMappings:按键事件&#xff0c;有按下和抬起两个事件&#xff0c;需要分别用两个键触发AxisMappings:输入事件&#xff0c;返回值为float&#xff0c;对于键盘…

突破划片机技术瓶颈,博捷芯BJX3352助力晶圆切割行业升级

随着半导体行业的快速发展&#xff0c;晶圆切割作为半导体制造过程中的重要环节&#xff0c;对于切割设备的性能和精度要求越来越高。为了满足市场需求&#xff0c;提高生产效率&#xff0c;国产划片机企业博捷芯推出了新一代划片机BJX3352&#xff0c;成功突破了技术瓶颈&…

(设置非自定义Bean)学习Spring的第六天

一 . 获取Bean的方法详解 , 如下图 : 二 . Spring配置非自定义bean----DruidDatasource 我们举个例子 : 配置Druid数据源交由Spring管理 首先导入在pom文件Druid坐标 然后考虑 : 被配置的Bean的实例化方式是什么 : 无参构造 被配置的Bena是否要注入必要属性 : 四个基本信息…

msvcp140_atomic_wait.dll文件缺失的解决方法指南,如何快速修复

在处理计算机软件时&#xff0c;我们经常遭遇一些阻碍程序运行的错误&#xff0c;尤其是那些与动态链接库(DLL)文件相关的。msvcp140_atomic_wait.dll是一个常见的DLL文件&#xff0c;它在Windows操作系统中扮演了重要角色。本文将讨论msvcp140_atomic_wait.dll文件的作用&…

小程序导出excel

先上个图&#xff0c;这个是在电脑上测试导出来的表 大致远离就是用的原生td&#xff0c;tr去导出的&#xff0c; 代码 <template><view><button click"tableToExcel">导出一个表来看</button></view> </template><script&g…

《Python数据分析技术栈》第01章 02 Jupyter入门(Getting started with Jupyter notebooks)

02 Jupyter入门&#xff08;Getting started with Jupyter notebooks&#xff09; 《Python数据分析技术栈》第01章 02 Jupyter入门&#xff08;Getting started with Jupyter notebooks&#xff09; Before we discuss the essentials of Jupyter notebooks, let us discuss…

C语言编译和链接

翻译环境和运行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境 .第一种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令 .第二种是执行环境&#xff0c;它用于实际执行代码 翻译环境 翻译环境是由编译和链接两个大过程组成&#xff0c;而…