el-form里面表单遍历渲染,里面放el-row,一行放3个表单怎么实现

需求: 需要实现 el-form里面的表单遍历渲染,里面放el-row,一行放3个表单怎么实现?
废话不多说直接上demo

 <el-form ref="form" :model="form" label-width="80px"><el-row v-for="(row, index) in Math.ceil(formFields.length / 3)" :key="index"><el-col v-for="(field, fieldIndex) in formFields.slice(index * 3, (index + 1) * 3)" :key="fieldIndex" :span="8"><el-form-item :label="field.label" :prop="field.prop"><el-input v-model="field.prop" :placeholder="'请输入' + field.label " /></el-form-item></el-col></el-row></el-form>
 data() {return {formFields: [{ label: '字段1', prop: 'field1' },{ label: '字段2', prop: 'field2' },{ label: '字段3', prop: 'field3' },{ label: '字段4', prop: 'field4' },{ label: '字段5', prop: 'field5' },{ label: '字段6', prop: 'field6' }// 其他表单字段...]}},

效果实现 如图

在这里插入图片描述

如果你觉得有用 请 点赞 + 收藏 !!!

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

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

相关文章

BUGKU bp

打开环境&#xff0c;他提示了弱密码top1000&#xff0c;随便输入密码123抓包爆破 发现长度都一样&#xff0c;看一下响应发现一段js代码&#xff0c;若r值为{code: bugku10000}&#xff0c;则会返回错误&#xff0c;通过这一句“window.location.href success.php?coder.cod…

计算机二级Python刷题笔记------基本操作题11、14、17、21、30(考察列表)

文章目录 第十一题&#xff08;列表遍历&#xff09;第十四题&#xff08;len&#xff09;第十七题&#xff08;len、insert&#xff09;第二十一题&#xff08;append&#xff09;第三十题&#xff08;二维列表&#xff09; 第十一题&#xff08;列表遍历&#xff09; 题目&a…

springcloud和基础服务的搭建以及封装

代码仓库地址&#xff1a;https://github.com/zhaoyiwen-wuxian/springcloud-common page分页也进行了封装&#xff0c;只需要添加到pom中&#xff0c;将会自动进行分页&#xff0c;并且后端不需要写任何的分页数据。只需要前端自己传分页参数即可&#xff0c;并且里面封装了很…

Hololens 2应用开发系列(2)——MRTK基础知识及配置文件配置(上)

Hololens 2应用开发系列&#xff08;2&#xff09;——MRTK基础知识及配置文件配置 一、前言二、MRTK基础知识2.1 MRTK概述2.2 MRTK运行逻辑2.3 MRTK配置文件介绍2.4 MRTK服务 三、配置文件使用3.1 总配置文件3.2 相机配置3.3 其他配置 参考文献 一、前言 在前面的文章中&…

使用 Docker 部署 Answer 问答平台

1&#xff09;介绍 GitHub&#xff1a;https://github.com/apache/incubator-answer Answer 问答社区是在线平台&#xff0c;让用户提出问题并获得回答。用户可以发布问题并得到其他用户的详细答案、建议或信息。回答可以投票或评分&#xff0c;有助于确定有用的内容。标签和分…

Ps:历史记录面板

Ps菜单&#xff1a;窗口/历史记录 Window/History 历史记录 History面板提供了对图像编辑过程中所进行更改的深入控制&#xff0c;可以让用户回溯并查看每一步操作&#xff0c;从而允许用户轻松撤销错误或比较不同的编辑效果。 ◆ ◆ ◆ 常用操作方法与技巧 “历史记录”面板…

CentOS7设置虚拟机语言为中文

1.查看本地安装的语言 locale -a 是一个Linux命令&#xff0c;用于列出系统中可用的所有区域设置&#xff08;locales&#xff09;它包含了各种语言和地区的不同设置。 打开终端&#xff08;右键open terminal&#xff09;输入 locale -a 查看本地安装的语言&#xff1a; 其中z…

一些可以访问gpt的方式

1、Coze扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力&#xff0c;扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体&#xff0c;并发布到豆包、飞书等各个平台。https://www.coze.cn/ 2、https://poe.com/ 3、插件阿里…

EasyRecovery16电脑硬盘数据恢复软件功能详解

在数字化时代&#xff0c;人们在日常生活和工作中越来越依赖于电脑和移动设备。不管是个人用户还是企业&#xff0c;数据的重要性都不言而喻。然而&#xff0c;数据丢失和损坏的风险也随之增加&#xff0c;因此&#xff0c;数据恢复软件的需求也日益增长。 EasyRecovery 16是一…

【打工日常】使用docker部署在线Photopea用于linux下替代ps

一、Photopea介绍 linux没有ps适配&#xff0c;对于有时候工作来说确实不方便&#xff0c;我找了很久&#xff0c;才找到了一款功能可以跟ps接近的在线软件&#xff0c;使用docker部署就可以了。它是ps的最佳替代品之一&#xff0c;其界面几乎与ps相同&#xff0c;只不过它是在…

Springboot+vue的医药管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的医药管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

云轴科技ZStack与华东师范大学共建产教融合基地

近日&#xff0c;上海云轴信息科技有限公司&#xff08;云轴科技ZStack&#xff09;与华东师范大学上海国际首席技术官学院宣布&#xff0c;共同打造产教融合基地&#xff0c;以促进人才培养与产业需求的全方位融合。这一举措旨在深化教育与产业的合作关系&#xff0c;培养更多…

实战 | 使用YOLOv8图像分割实现路面坑洞检测(步骤 + 代码)

导 读 本文主要介绍使用YOLOv8图像分割实现路面坑洞检测&#xff08;步骤 代码&#xff09;。 背 景 如上图所示&#xff0c;现实生活中路面坑洞对车辆和驾驶员安全来说存在巨大隐患&#xff0c;本文将介绍如何使用YoloV8图像分割技术来检测路面坑洞&#xff0c;从而提示驾…

计算机网络|Socket

文章目录 Socket并发socket Socket Socket是一种工作在TCP/IP协议栈上的API。 端口用于区分不同应用&#xff0c;IP地址用于区分不同主机。 以下是某一个服务器的socket代码。 其中with是python中的一个语法糖&#xff0c;代表当代码块离开with时&#xff0c;自动对s进行销毁…

JS:原型与原型链(附带图解与代码)

一、原型 写在前面&#xff1a; 任何对象都有原型。 函数也是对象&#xff0c;所以函数也有原型。 1.什么是原型 在 JavaScript 中&#xff0c;对象有一个特殊的隐藏属性 [[Prototype]]&#xff0c;它要么为 null&#xff0c;要么就是对另一个对象的引用&#xff0c;该对象…

什么是片内片间均匀性?

均匀性在芯片制程的每一个工序中都需要考虑到&#xff0c;包括薄膜沉积&#xff0c;刻蚀&#xff0c;光刻&#xff0c;cmp&#xff0c;离子注入等。较高的均匀性才能保证芯片的产品与性能。那么片内和片间非均匀性是什么&#xff1f;如何计算&#xff1f;有什么作用呢&#xff…

递归与递推(蓝桥杯 c++)

目录 题目一&#xff1a; 代码&#xff1a; 题目二: 代码&#xff1a; 题目三&#xff1a; 代码&#xff1a; 题目四&#xff1a; 代码&#xff1a; 题目一&#xff1a; 代码&#xff1a; #include<iostream> #include<cstring> using namespace std; int …

node.js最准确历史版本下载

先进入官网:Node.js https://nodejs.org/en 嫌其他博客多可以到/release下载:Node.js,在blog后面加/release https://nodejs.org/en/blog/release/ 点击next翻页,同样的道理

设计模式-结构型模式-外观模式

外观模式&#xff08;Facade&#xff09;&#xff0c;为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用。[DP] 首先&#xff0c;定义子系统的各个组件接口和具体实现类&#xff1a; // 子系统组件接…

2、事件机制、DOM操作、jquery对尺寸操作、jquery添加和删除

一、事件机制 1、事件源.事件类型(事件处理程序) $(this)中的this不能加引号 $(#box).click(function () {$(this).css(background-color,blue)//点击颜色变为蓝色 })2、事件源.on/bind(事件类型&#xff0c;事件处理程序) $("#box").on(dbclick,function () {$(…