element form表单的必填和重置事件不生效

2023-12-06 08:48

本文主要是介绍element form表单的必填和重置事件不生效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

element表单在使用的时候可以配置验证规则 必填选项和事件重置 但是很多人都会忽略form表单使用的时候的细节用法 从而导致某些功能实现不了 其实就是表单项要有一个prop属性
**

例如

**

<el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline"><el-form-item label="名称"><el-input v-model="student.name" placeholder="请输入名称"></el-input></el-form-item><el-form-item label="手机号"><el-input v-model="student.mobile" placeholder="请输入手机号"></el-input></el-form-item><el-form-item><el-button plain icon="el-icon-search" @click="search">搜索</el-button><el-button plain icon="el-icon-bottom-left" @click="resetForm('resetForm')">重置			</el-button></el-form-item></el-form>
	data() {return {student: {name: '',mobile: ''}}},methods: {resetForm(form) {this.$refs[form].resetFields();}}

这种情况下的表单重置是不会生效的 如果要生效就需要给每一个表单项写prop属性

<el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline"><el-form-item label="名称" prop="name"><el-input v-model="student.name" placeholder="请输入名称"></el-input></el-form-item><el-form-item label="手机号" prop="mobile"><el-input v-model="student.mobile" placeholder="请输入手机号"></el-input></el-form-item><el-form-item><el-button plain icon="el-icon-search" @click="search">搜索</el-button><el-button plain icon="el-icon-bottom-left" @click="resetForm('resetForm')">重置			</el-button></el-form-item></el-form>

这种情况下重置事件就会生效的 如果发现标记必填项的 红色 ‘’ 出现不了也是该问题导致的

这篇关于element form表单的必填和重置事件不生效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/461216

相关文章

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql数据库重置表主键id的实现

《mysql数据库重置表主键id的实现》在我们的开发过程中,难免在做测试的时候会生成一些杂乱无章的SQL主键数据,本文主要介绍了mysql数据库重置表主键id的实现,具有一定的参考价值,感兴趣的可以了... 目录关键语法演示案例在我们的开发过程中,难免在做测试的时候会生成一些杂乱无章的SQL主键数据,当我们

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

spring @EventListener 事件与监听的示例详解

《spring@EventListener事件与监听的示例详解》本文介绍了自定义Spring事件和监听器的方法,包括如何发布事件、监听事件以及如何处理异步事件,通过示例代码和日志,展示了事件的顺序... 目录1、自定义Application Event2、自定义监听3、测试4、源代码5、其他5.1 顺序执行

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法:使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1:使用 FormData 对象FormData 是一个方便的内置对象,用于获取表单中的键值