当前位置: 首页 > news >正文

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

在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.lryc.cn/news/229236.html

相关文章:

  • 笔记本分屏怎么操作?3个方法提高工作效率!
  • Android 使用poi生成Excel ,word并保存在指定路径内
  • 嵌入式杂记 -- MCU的大小端模式
  • 对这套BI零售数据分析方案心动,是零售人天性
  • vuekeyclock 集成
  • ARM Linux 基础学习 / 配置交叉编译工具链 / 编译 Linux 应用和驱动 / 编译内核
  • 通讯协议学习之路(实践部分):SPI开发实践
  • 【系统安装】ubuntu20.04启动盘制作,正经教程,小白安装教程,百分百成功安装
  • 2023云计算发展趋势
  • C# .NET Core API Controller以及辅助专案
  • asp.net图书管理系统
  • 概念解析 | LoRA:低秩矩阵分解在神经网络微调中的作用
  • 前端---CSS的盒模型
  • Linux可以投屏到电视吗?用网页浏览器就能投屏到电视!
  • 云汇优想:抖音矩阵系统有哪些类型?
  • XSS 漏洞的理解
  • cocosCreator 之内存管理和释放
  • 飞天使-template模版相关知识
  • 一、Hadoop3.1.3集群搭建
  • QML16、从 C++ 定义 QML 类型
  • 【中间件篇-Redis缓存数据库06】Redis主从复制/哨兵 高并发高可用
  • LeetCode(12)时间插入、删除和获取随机元素【数组/字符串】【中等】
  • 前端面试题 计算机网络
  • windows aseprite编译指南(白嫖)
  • 生活污水处理一体化处理设备有哪些
  • JSON可视化管理工具JSON Hero
  • P6入门:项目初始化7-项目详情之代码/分类码Code
  • 跨国企业如何选择安全靠谱的跨国传输文件软件?
  • Command Injection
  • LeetCode | 20. 有效的括号