HTML开发 Vue2.x + Element-UI 动态生成表单项并添加表单校验

基于vue2.x 和element-ui 动态生成表单项并添加表单校验;

1、需求问题

如下图,项目有个需求,点击添加按钮,新增一行设备信息,且每项信息必填;

需求图片

2、代码

看到这个需求,首先想到要使用v-for的形式进行处理每一行设备信息;但是,之前没有搞过动态生成表单项并添加表单校验(最近几年又回归iOS开发,H5开发只是临时协助其他部门开发),自己先尝试写了下,但是表单校验死活不起作用;问了部门H5大佬,结果都是没有写过类似页面,怎么办,网上搜索呗;果然网上不少内容,但是在我项目中依旧是表单校验不起作用,只好一一尝试修改,最终搞定;

特别需要注意的一点是,想要其作用,不能直接给el-form直接添加rules,动态绑定,需要给具体el-form-item添加对应的rules

有效代码示例:

 <el-form ref="form" v-loading="isLoading" class="list-container" :model="form" label-width="0"><div v-for="(item, index) in form.devices" :key="index" class="list-item-container"><el-form-item :prop="'devices.' + index + '.name'" :rules="rules.name"><el-input v-model="item.name" class="list-item-input" size="small" maxlength="20" clearable placeholder="设备名称" /></el-form-item><el-form-item :prop="'devices.' + index + '.quantity'" :rules="rules.quantity"><el-input v-model="item.quantity" class="list-item-input-samll" size="small" maxlength="20" clearable placeholder="设备数量" /></el-form-item><el-form-item><el-button class="danger" size="small" type="text" @click="handleDelete(index)">删除</el-button></el-form-item></div></el-form>

无效代码示例:

 <el-form ref="form" v-loading="isLoading" class="list-container" :model="form" :rules="rules" label-width="0"><div v-for="(item, index) in form.devices" :key="index" class="list-item-container"><el-form-item :prop="'devices.' + index + '.name'"><el-input v-model="item.name" class="list-item-input" size="small" maxlength="20" clearable placeholder="设备名称" /></el-form-item><el-form-item :prop="'devices.' + index + '.quantity'"><el-input v-model="item.quantity" class="list-item-input-samll" size="small" maxlength="20" clearable placeholder="设备数量" /></el-form-item><el-form-item><el-button class="danger" size="small" type="text" @click="handleDelete(index)">删除</el-button></el-form-item></div></el-form>

废话少数,直接上成品代码;

<template><div class="ledger-tab-page"><el-button type="primary" @click="handleAdd">{{ '添加' }}</el-button><el-form ref="form" v-loading="isLoading" class="list-container" :model="form" label-width="0"><div v-for="(item, index) in form.devices" :key="index" class="list-item-container"><el-form-item :prop="'devices.' + index + '.name'" :rules="rules.name"><el-input v-model="item.name" class="list-item-input" size="small" maxlength="20" clearable placeholder="设备名称" /></el-form-item><el-form-item :prop="'devices.' + index + '.quantity'" :rules="rules.quantity"><el-input v-model="item.quantity" class="list-item-input-samll" size="small" maxlength="20" clearable placeholder="设备数量" /></el-form-item><el-form-item :prop="'devices.' + index + '.km_mileage'" :rules="rules.km_mileage"><span class="list-item-text">DK</span><el-input v-model="item.km_mileage" class="list-item-input-samll" size="small" maxlength="3" clearable placeholder="安装里程" /></el-form-item><el-form-item :prop="'devices.' + index + '.metre_mileage'" :rules="rules.metre_mileage"><span> + </span><el-input v-model="item.metre_mileage" class="list-item-input-samll" size="small" maxlength="3" clearable placeholder="安装里程" /></el-form-item><el-form-item :prop="'devices.' + index + '.validity_date'" :rules="rules.validity_date"><el-date-picker v-model="item.validity_date" type="datetime" size="small" class="list-item-date" placeholder="请选择有效期" default-time="00:00:00" /></el-form-item><el-form-item><el-button class="danger" size="small" type="text" @click="handleDelete(index)">删除</el-button></el-form-item></div></el-form></div>
</template>
<script>import _ from 'lodash'export default {components: {BwtButton},props: {info: {type: Array,default: () => {return []}}},data() {return {isLoading: false,form: {devices: []},rules: {// 'devices.*.name': [//   { required: true, message: '设备名称为必填项', trigger: 'blur' }// ],name: [{ required: true, message: '设备名称为必填项', trigger: 'blur' }],quantity: [{ required: true, message: '设备数量为必填项', trigger: 'blur' },{ type: 'number', message: '设备数量必须为数字', trigger: 'blur' },{ pattern: /^[1-9]\d{0,3}$/, message: '请输入正确的设备数量', trigger: 'blur' }],km_mileage: [{ required: true, message: '安装里程为必填项', trigger: 'blur' },{ type: 'number', message: '安装里程必须为数字', trigger: 'blur' },{ pattern: /^[1-9]\d{0,2}$/, message: '请输入正确的里程范围', trigger: 'blur' }],metre_mileage: [{ required: true, message: '安装里程为必填项', trigger: 'blur' },{ type: 'number', message: '安装里程必须为数字', trigger: 'blur' },{ pattern: /^[1-9]\d{0,2}$/, message: '请输入正确的里程范围', trigger: 'blur' }],validity_date: [{ required: true, message: '请选择有效期', trigger: 'blur' }]}}},computed: {},watch: {'info': function(newVal) {if (newVal) {// 处理详情回显this.form.devices = newVal || []}}},mounted() {},methods: {// 清空表单内容(供外部调用)resetFields() {this.form.devices = []},// 表单校验(供外部调用)formValidate() {// 校验:如果name为空,不允许提交return new Promise((resolve, reject) => {try {this.$refs.form.validate((valid) => {if (!valid) {this.$message.error('请完善设备信息')}resolve(valid)})} catch (error) {reject(error)}})},// 获取当前页面的表单数据formData() {return _.cloneDeep(this.form.devices)},// 新增handleAdd() {// 增加一行,const item = {name: '',quantity: '',km_mileage: '',metre_mileage: '',validity_date: ''}this.form.devices.push(item)},// 删除handleDelete(index) {this.form.devices.splice(index, 1)}}
}
</script>
<style scoped lang="scss">
.ledger-tab-page {margin: 20px 0;width: 100%;
}.list-container {margin-top: 10px;max-height: 400px;overflow-y: auto !important;
}.list-item-container {display: flex;width: 100%;
}.list-item-input {width: 200px !important;margin-right: 10px;
}.list-item-text {margin: 0 5px;
}.list-item-input-samll {width: 100px !important;margin-right: 5px;margin-left: 5px;
}.list-item-date {width: 200px !important;margin-right: 10px;
}</style>

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

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

相关文章

使用 flask + qwen 实现 txt2sql 流式输出

前言 一般的大模型提供的 api 都是在提问之后过很久才会返回对话内容&#xff0c;可能要耗时在 3 秒以上了&#xff0c;如果是复杂的问题&#xff0c;大模型在理解和推理的耗时会更长&#xff0c;这种展示结果的方式对于用户体验是很差的。 其实大模型也是可以进行流式输出&a…

Vue3 一 快速启动基于Vite 创建项目

编码规范 TypeScript 组合式API setup语法糖 基于Vite 创建项目 WinR输入 CMD 回车后打开CMD命令行 已安装 18.3以上版本的NodeJS,js(安装) 我们用 NPM 方式安装 输入命令npm create vuelatest PS D:\WORK\NodeJS> npm create vuelatest Need to install the following …

4.组件间通信-v-model

vue3组件间通信-v-model 父组件&#xff1a; <template><div class"father"><h3>父组件</h3><!-- <h4>{{ username }}</h4><h4>{{ password }}</h4> --><!-- v-model用在html标签上 --><!-- <in…

前端工程化工具系列(十四)—— Webpack(v5.91.0):应用模块打包器与构建工具

Webpack 是用于现代 JavaScript 应用程序的静态模块打包器。 当 webpack 处理应用程序时&#xff0c;它会在内部构建一个依赖关系图&#xff0c;该图映射项目所需的每个模块最终会生成一个或多个包。 1 概念 1.1 modules Webpack 中&#xff0c;无论是 JS 、CSS 还是图片等&…

《软件定义安全》之一:SDN和NFV:下一代网络的变革

第1章 SDN和NFV&#xff1a;下一代网络的变革 1.什么是SDN和NFV 1.1 SDN/NFV的体系结构 SDN SDN的体系结构可以分为3层&#xff1a; 基础设施层由经过资源抽象的网络设备组成&#xff0c;仅实现网络转发等数据平面的功能&#xff0c;不包含或仅包含有限的控制平面的功能。…

Python语言读取图像

import cv2 import numpy as np width 640 # 图像宽度height 480 # 图像高度channels 3 # 颜色通道数imgEmpty np.empty((height, width, channels), np.uint8) # 创建空白数组imgBlack np.zeros((height, width, channels), np.uint8) # 创建黑色图像 RGB0imgWhite …

STM32 uc/OS-III多任务程序

目录 一、项目创建 二、代码移植 1、uC/OS-III源码处理 2、KEIL文件配置 ​编辑3、文件修改 启动文件 ​编辑app_cfg.h includes.h bsp.c和bsp.h main.c lib_ cfg.h app.c和app.h 三、总结 学习目标&#xff1a; 学习嵌入式实时操作系统&#xff08;RTOS&#xf…

贪心算法03(leetcode1005,134,135)

参考资料&#xff1a; https://programmercarl.com/1005.K%E6%AC%A1%E5%8F%96%E5%8F%8D%E5%90%8E%E6%9C%80%E5%A4%A7%E5%8C%96%E7%9A%84%E6%95%B0%E7%BB%84%E5%92%8C.html 1005. K 次取反后最大化的数组和 题目描述&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xf…

覆盖路径规划经典算法 The Boustrophedon Cellular Decomposition 论文及代码详解

2000年一篇论文 Coverage of Known Spaces: The Boustrophedon Cellular Decomposition 横空出世&#xff0c;解决了很多计算机和机器人领域的覆盖路径问题&#xff0c;今天我来详细解读这个算法。 The Boustrophedon Cellular Decomposition 算法详解 这篇论文标题为"C…

arm系统中双网卡共存问题

文章目录 单网卡单独运行双网卡共存问题双网卡解决方案方案一方案二方案三验证双网卡通过网卡名获取IP通过TCP与服务端通信参考单网卡单独运行 双网卡共存问题 双网卡解决方案 方案一 https://blog.csdn.net/HowieXue/article/details/75937972 方案二 http://bbs.witech…

办理公司诉讼记录删除行政处罚记录删除

企业行政处罚记录是可以做到撤销消除的&#xff0c;一直被大多数企业忽略&#xff0c;如果相关诉讼记录得不到及时删除&#xff0c;不仅影响企业招投标&#xff0c;还影响企业的贷款申请&#xff0c;严重的让企业资金链断裂&#xff0c;影响企业长远发展和企业形象。行政处罚是…

SpringBoot整合RabbitMQ实现消息延迟队列

环境依赖 SpringBoot 3.1.0 JDK 17 前期准备 安装MQ: liunxdockerrabbitmq安装延迟队列插件 实例 实现延迟队列的一种方式是在 RabbitMQ 中使用消息延迟插件&#xff0c;这个插件可以让你在消息发送时设置一个延迟时间&#xff0c;超过这个时间后消息才会被消费者接收到…

Vyper重入漏洞解析

什么是重入攻击 Reentrancy攻击是以太坊智能合约中最具破坏性的攻击之一。当一个函数对另一个不可信合约进行外部调用时&#xff0c;就会发生重入攻击。然后&#xff0c;不可信合约会递归调用原始函数&#xff0c;试图耗尽资金。 当合约在发送资金之前未能更新其状态时&#…

Dubbo 3.x源码(20)—Dubbo服务引用源码(3)

基于Dubbo 3.1&#xff0c;详细介绍了Dubbo服务的发布与引用的源码。 此前我们学习了调用createProxy方法&#xff0c;根据服务引用参数map创建服务接口代理引用对象的整体流程&#xff0c;我们知道会调用createInvokerForRemote方法创建远程引用Invoker&#xff0c;这是Dubbo …

深入理解Python:多线程与多进程编程

深入理解Python:多线程与多进程编程 在现代软件开发中,充分利用计算机的多核处理能力来提升程序的性能是至关重要的。Python提供了多线程和多进程两种并发编程方式。本文将深入探讨这两种并发编程的基本概念、使用方法以及各自的优缺点,并通过实际代码示例展示其应用。 目…

总结七大排序算法

插入排序 直接插入排序是一种简单的插入排序法&#xff0c;其基本思想是&#xff1a;把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。实际中我们玩扑克牌时&#xff0c;就用了…

QML键盘事件的用法和示例

文章目录 处理单一按键处理组合键处理快捷键在QML中,键盘事件通常通过Keys对象和相关的事件处理器来管理。这些事件处理器可以直接添加到任何接受键盘输入的QML元素中。这里介绍一下各种键盘事件的处理方式。 处理单一按键 处理单一按键的方式比较简单,直接在元素的Keys对象…

Python Mistune库:Markdown解析和处理

更多Python学习内容&#xff1a;ipengtao.com Mistune是一个用于Python的快速且功能强大的Markdown解析库。它以其高性能和灵活性著称&#xff0c;能够轻松扩展和定制。Mistune支持标准的Markdown语法&#xff0c;并且可以通过插件扩展支持更多功能&#xff0c;例如数学公式、高…

数据结构严蔚敏版精简版-栈和队列以及c语言代码实现

1栈的定义和特权 栈(stack)是限定仅在表尾进行插入或删除操作的线性表。 注&#xff1a;虽然说栈的实现就是一端插入和删除&#xff0c;但不一定是在“表尾”&#xff0c;这个“表尾”是广义的。 头插法实现链栈 尾插法实现链栈 因此&#xff0c;对栈来说&#xff0c;表尾…

4. 流程控制语句

文章目录 4.1 if 条件语句4.1.1 单分支4.1.2 双分支4.1.3 多分支 4.2 退出程序4.3 case语句 4.1 if 条件语句 4.1.1 单分支 语法如下&#xff1a; if <条件表达式> then指令 fi或者 if <条件表达式>; then指令 fi使用示例&#xff1a;判断是否已经成功挂载光盘&…