Element使用表单重置如果不使用prop,重置无法生效

文章目录

      • 为什么需要 `prop`?
      • 示例:使用 `prop` 的正确方式
      • 关键点
      • 总结

element-uiel-form 组件中, prop 属性是与表单验证和表单字段绑定密切相关的,尤其在使用 resetFields() 重置表单数据时。
如果不使用 propel-form 将无法准确地识别和操作每个表单项,因此重置操作可能无法生效。

为什么需要 prop

  1. 验证依赖:表单验证需要通过 prop 来区分不同的表单项,确保验证规则能够正确应用。没有 propel-form 就无法知道如何验证这个字段,也无法在表单重置时清除验证状态。

  2. 重置操作resetFields() 方法是通过表单项的 prop 来重置相应的数据的。如果没有 propel-form 就无法识别哪些字段需要被重置,从而导致重置操作无法生效。

示例:使用 prop 的正确方式

<template><div style="padding: 20px;"><el-form ref="form" :model="form" label-width="auto" style="width:100%"><el-row><el-col :span="12"><el-form-item label="产品名称" prop="name"><el-input v-model="form.name" placeholder="请输入产品名称" /></el-form-item></el-col><el-col :span="12"><el-form-item label="产品类型" prop="region"><el-select v-model="form.region" placeholder="请输入产品类型"><el-option label="应用产品" value="001" /><el-option label="WEB产品" value="002" /></el-select></el-form-item></el-col><el-col :span="24"><el-form-item label="产品简介" prop="desc"><el-input v-model="form.desc" type="textarea" /></el-form-item></el-col></el-row><el-row justify="center"><el-form-item><el-button type="primary" @click="onSubmit">搜索</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-row></el-form></div>
</template><script>
export default {data() {return {form: {name: '',region: '',desc: ''}};},methods: {onSubmit() {console.log('submit!');},onReset() {this.$refs.form.resetFields();}}
};
</script><style lang="scss" scoped>
/* 样式部分 */
</style>

关键点

  1. prop 属性:为每个 el-form-item 添加 prop 属性,prop 应该与 model 中的字段名称对应。这样,el-form 才能正确地识别并重置每个字段。

  2. resetFields()this.$refs.form.resetFields() 会根据 prop 属性来重置表单项的值和校验状态,因此必须为每个表单项提供 prop

总结

没有 propresetFields() 无法知道要重置哪些字段,从而导致重置操作无法生效。因此,为了使表单重置生效,确保每个 el-form-item 都有 prop 属性,且 propmodel 中的数据字段相对应。

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

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

相关文章

AI守护煤矿安全生产:基于视频智能的煤矿管理系统架构解析

前言 本文我将介绍我和我的团队自主研发设计的一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。 这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的…

.NET开源的处理分布式事务的解决方案

前言 在分布式系统中&#xff0c;由于各个系统服务之间的独立性和网络通信的不确定性&#xff0c;要确保跨系统的事务操作的最终一致性是一项重大的挑战。今天给大家推荐一个.NET开源的处理分布式事务的解决方案基于 .NET Standard 的 C# 库&#xff1a;CAP。 CAP项目介绍 C…

计算机网络 (52)秘钥分配

一、重要性 在计算机网络中&#xff0c;密钥分配是密钥管理中的一个核心问题。由于密码算法通常是公开的&#xff0c;因此网络的安全性主要依赖于密钥的安全保护。密钥分配的目的是确保密钥在传输过程中不被窃取或篡改&#xff0c;同时确保只有合法的用户才能获得密钥。 二、方…

Open3D计算点云粗糙度(方法一)【2025最新版】

目录 一、Roughness二、代码实现三、结果展示博客长期更新,本文最近更新时间为:2025年1月18日。 一、Roughness 通过菜单栏的Tools > Other > Roughness找到该功能。 这个工具可以估计点云的“粗糙度”。 选择一个或几个点云,然后启动这个工具。 CloudCompare只会询问…

DDD - 整洁架构_解决技术设计困局

文章目录 Pre如何落地 DDD底层技术的更迭 整洁架构的设计主动适配器/北向适配器被动适配器/南向适配器 整洁架构的落地总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对象的两种设计思路…

一个软件分发和下载的网站源码,带多套模板

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程 代码下载&#xff1a;百度网盘

OSPF协议部分解读

多年前所写, 主要是对OSPF的RFC协议标准的解读. 工作中接触网络路由协议OSPF的同学可以参考参考.如有理解错误请谅解, 不过可以肯定的是一定有理解错误的地方的. RFC2328 1.1小节 1. OSPF routes IP packets based solely on the destination IPaddress found in the IP pac…

安装wxFormBuilder

1. 网址&#xff1a;GitHub - wxFormBuilder/wxFormBuilder: A wxWidgets GUI Builder 2. 安装MSYS2 MSYS2可以在GitHub的内容中找到&#xff0c;这个版本是32位64位的 3. 在程序中打开MINGW64 shell 4. 在MSYS2 MINGW64 shell中输入 pacman -Syu pacman -S ${MINGW_PACKAGE…

基于微信小程序高校订餐系统的设计与开发ssm+论文源码调试讲解

第4章 系统设计 一个成功设计的系统在内容上必定是丰富的&#xff0c;在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值&#xff0c;吸引更多的访问者访问系统&#xff0c;以及让来访用户可以花费更多时间停留在系统上&#xff0c;则表明该系统设计得比较专…

C#中的语句

C#提供了各式各样的语句&#xff0c;大多数是由C和C发展而来&#xff0c;当然&#xff0c;在C#中做了相应修改。语句和表达式一样&#xff0c;都是C#程序的基本组成部分&#xff0c;在本文我们来一起学习C#语句。 1.语句 语句是构造所有C#程序的过程构造块。在语句中可以声明…

微服务学习-Gateway 统一微服务入口

1. 微服务为什么需要 API 网关&#xff1f; 1.1. 在微服务架构中&#xff0c;通常一个系统会被拆分为多个微服务&#xff0c;面对多个微服务客户端应该如何去调用呢&#xff1f; 如果根据每个微服务的地址发起调用&#xff0c;存在如下问题&#xff1a; 客户端多次请求不同的…

linux-FTP服务配置与应用

也许你对FTP不陌生&#xff0c;但是你是否了解FTP到底是个什么玩意&#xff1f; FTP 是File Transfer Protocol&#xff08;文件传输协议&#xff09;的英文简称&#xff0c;而中文简称为 “文传协议” 用于Internet上的控制文件的双向传输。同时&#xff0c;它也是一个应用程序…

代码随想录算法训练营第 14 天(树2)| 226.翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

一、#226.翻转二叉树 题目&#xff1a;https://leetcode.cn/problems/invert-binary-tree/ 视频&#xff1a;https://www.bilibili.com/video/BV1sP4y1f7q7 讲解&#xff1a;https://programmercarl.com/0226.%E7%BF%BB%E8%BD%AC%E4%BA%8C%E5%8F%89%E6%A0%91.html 注意这里交换…

基于微信小程序的科创微应用平台设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

【MySQL】数据库基础知识

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;【MySQL】数据库基础知识 发布时间&#xff1a;2025.1.21 隶属专栏&#xff1a;MySQL 目录 什么是数据库为什么要有数据库数据库的概念 主流数据库mysql的安装mysql登录使用一下mysql显示数据库内容创建一个数据库创…

STM32学习9---EXIT外部中断(理论)

本文参考江科大和其他博主&#xff0c;侵删&#xff01; 中断系统是管理和执行中断的逻辑结构 &#xff0c;外部中断是产生中断的外设之一。 一、STM32中断 1、中断基本介绍 68个可屏蔽中断通道&#xff08;中断源&#xff09;&#xff0c;包含EXTI外部、TIM定时器、ADC模数…

步入响应式编程篇(二)之Reactor API

步入响应式编程篇&#xff08;二&#xff09;之Reactor API 前言回顾响应式编程Reactor API的使用Stream引入依赖Reactor API的使用流源头的创建 reactor api的背压模式发布者与订阅者使用的线程查看弹珠图查看形成新流的日志 前言 对于响应式编程的基于概念&#xff0c;以及J…

66,【6】buuctf web [HarekazeCTF2019]Avatar Uploader 1

进入靶场 习惯性输入admin 还想用桌面上的123.png 发现不行 看看给的源码 <?php // 关闭错误报告&#xff0c;可能会隐藏一些错误信息&#xff0c;在开发阶段可考虑开启&#xff08;例如 error_reporting(E_ALL)&#xff09; error_reporting(0); // 引入配置文件&#x…

FortiGate配置远程拨号VPN

我们前面介绍了FortiGate如何配置IPsec VPN的两种类型&#xff1a;站到站&#xff08;卷土重来&#xff01;这次终于把FortiGate的IPsec VPN配置成功了&#xff01;&#xff09;和Hub-and-Spoke&#xff08;漂亮&#xff01;FortiGate配置Hub-Spoke类型的IPsec VPN竟然是Full-M…

linux下springboot项目nohup日志或tomcat日志切割处理方案

目录 1. 配置流程 2. 配置说明 其他配置选项&#xff1a; 3. 测试执行 4. 手动执行 https://juejin.cn/post/7081890486453010469 通常情况下&#xff0c;我们的springboot项目部署到linux服务器中&#xff0c;通过nohup java -jar xxx.jar &指令来进行后台运行我们…