vue中如何将json数组指定的key赋值给el-form-item并均匀的分成2列

news/2025/1/15 6:57:53/

在Vue中,你可以使用v-for指令来遍历JSON数组,并将指定的key赋值给el-form-item。下面是一个示例:

<template><el-form><el-row><el-col :span="6" v-for="item in jsonArray" :key="item.key"><el-form-item :label="item.label"><el-input v-model="item.value"></el-input></el-form-item></el-col></el-row></el-form>
</template><script>
export default {data() {return {jsonArray: [{ key: 'name', label: '姓名', value: '' },{ key: 'age', label: '年龄', value: '' },{ key: 'email', label: '邮箱', value: '' }]};}
};
</script>

在上面的示例中,我们使用el-row和el-col来创建一个栅格布局。通过设置el-col的span属性为6,我们将JSON数组均匀分成四列(每列占据栅格系统的1/4)。

这样,JSON数组中的每个对象都会在栅格布局中占据一个el-col,并且均匀分布在四列中。你可以根据需要调整span属性的值来实现不同的布局效果。


http://www.ppmy.cn/news/1216138.html

相关文章

Java Stream 的常用API

Java Stream 的常用API 遍历&#xff08;forEach&#xff09; package com.liudashuai;import java.util.ArrayList; import java.util.List;public class Test {public static void main(String[] args) {List<Person> userList new ArrayList<>();userList.ad…

HarmonyOS开发(一):开发工具起步

1、DevEco Studio 工具下载地址&#xff1a;HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 DevEco Studio基础配置 Node.jsOhpm 这两个都可以在进入IDE时在工具上选择下载安装 2、HelloWorld工程 打开DevEco,那么会进入欢迎页&#xff0c;点击Create Project---…

岗前酒精检测仪

岗前酒精检测仪&#xff1a;集“酒精检测智能测温人脸考勤”三合一智能检测仪。 酒精检测功能&#xff1a;采用电化学传感器检测检测酒精浓度&#xff0c;具有吹气中断及吹气流量侦测&#xff0c;吹气防欺骗设计&#xff0c;吹气温度及吸气侦测&#xff1b;响应时间≤20毫秒&am…

RK3568笔记五:基于Yolov5的训练及部署

若该文为原创文章&#xff0c;转载请注明原文出处。 一. 部署概述 环境&#xff1a;Ubuntu20.04、python3.8 芯片&#xff1a;RK3568 芯片系统&#xff1a;buildroot 开发板&#xff1a;ATK-DLRK3568 开发主要参考文档&#xff1a;《Rockchip_Quick_Start_RKNN_Toolkit2_C…

C语言求数组中出现次数最多的元素

一、前言 遇到一个需求&#xff0c;需要求数组中出现次数最多的元素&#xff0c;查找了一些资料&#xff0c;结合自己的思路&#xff0c;编写了程序并验证。 只考虑元素为非负整数的数组&#xff0c;如果有出现次数相同的元素&#xff0c;则返回较小元素。 二、编程思路 以数…

2023亚太杯数学建模C题思路解析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料5 最后 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 2023年第十三…

【Git】第一篇:Git安装(centos)

git查看安装版本 以我自己的centos7.6为例&#xff0c;我们可以输入以下指令查看自己是否安装了git. git --version安装了的话就会显示自己安装的版本。 git 安装 安装很简单&#xff0c;一条命令即可 sudo yum install git -ygit 卸载 sudo yum remove git -y

ubuntu 安装docker-compose

一、下载 Docker Compose 二进制文件&#xff1a; sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose 二、授予执行权限&#xff1a; sudo chmod x /usr/loc…