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

相关文章

解决JSONField、JsonProperty不生效的问题

《解决JSONField、JsonProperty不生效的问题》:本文主要介绍解决JSONField、JsonProperty不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录jsONField、JsonProperty不生效javascript问题排查总结JSONField

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

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实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言