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

news2025/1/23 0:54:24

文章目录

      • 为什么需要 `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.coloradmin.cn/o/2280626.html

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

相关文章

两天时间!我搞定了Intel显卡(核显)+Windows安装stable-diffusion-AI画画软件

两天时间&#xff01;我搞定了Intel显卡&#xff08;核显&#xff09;Windows安装stable-diffusion-AI画画软件 文章目录 两天时间&#xff01;我搞定了Intel显卡&#xff08;核显&#xff09;Windows安装stable-diffusion-AI画画软件前言一、工具的选择二、工具的熟悉三、硬件…

云计算、AI与国产化浪潮下DBA职业之路风云变幻,如何谋破局启新途?

引言 在近日举办的一场「云和恩墨大讲堂」直播栏目中&#xff0c;云和恩墨联合创始人李轶楠、副总经理熊军和欧冶云商数据库首席薛晓刚共同探讨了DBA的现状与未来发展。三位专家从云计算、人工智能、国产化替代等多个角度进行了深入的分析和探讨&#xff0c;为从业者提供了宝贵…

npm install 报错:Command failed: git checkout 2.2.0-c

[TOC](npm install 报错&#xff1a;Command failed: git checkout 2.2.0-c) npm install 报错&#xff1a;Command failed: git checkout 2.2.0-c export NODE_HOME/usr/local/node-v14.14.0-linux-x64 npm config set registry https://registry.npmmirror.com 使用如上环…

场馆预定平台高并发时间段预定实现V2

&#x1f3af; 本文档介绍了场馆预订系统接口V2的设计与实现&#xff0c;旨在解决V1版本中库存数据不一致及性能瓶颈的问题。通过引入令牌机制确保缓存和数据库库存的最终一致性&#xff0c;避免因服务器故障导致的库存错误占用问题。同时&#xff0c;采用消息队列异步处理库存…

图解Git——分布式Git《Pro Git》

分布式工作流程 Centralized Workflow&#xff08;集中式工作流&#xff09; 所有开发者都与同一个中央仓库同步代码&#xff0c;每个人通过拉取、提交来合作。如果两个开发者同时修改了相同的文件&#xff0c;后一个开发者必须在推送之前合并其他人的更改。 Integration-Mana…

将 AzureBlob 的日志通过 Azure Event Hubs 发给 Elasticsearch(1.标准版)

问题 项目里使用了 AzureBlob 存储了用户上传的各种资源文件&#xff0c;近期 AzureBlob 的流量费用增长很快&#xff0c;想通过分析Blob的日志&#xff0c;获取一些可用的信息&#xff0c;所以有了这个需求&#xff1a;将存储账户的日志&#xff08;读写&#xff0c;审计&…

【json_object】mysql中json_object函数过长,显示不全

问题&#xff1a;json只显示部分 解决&#xff1a; SET GLOBAL group_concat_max_len 1000000; -- 设置为1MB&#xff0c;根据需要调整如果当前在navicat上修改&#xff0c;只有效本次连接和后续会话&#xff0c;重新连接还是会恢复默认值1024 在my.ini配置文件中新增或者修…

Flink底层架构与运行流程

这张图展示了Flink程序的架构和运行流程。 主要组件及功能&#xff1a; Flink Program&#xff08;Flink程序&#xff09;&#xff1a; 包含Program code&#xff08;程序代码&#xff09;&#xff0c;这是用户编写的业务逻辑代码。经过Optimizer / Graph Builder&#xff08…

你还在用idea吗

从VIM、Emacs&#xff0c;到eclipse、Jetbrains, 再到VSCode&#xff0c;过去的三十年时间&#xff0c;出现了这三代IDE产品。现在属于AI的时代来了&#xff0c;最新一代的产品像Cursor、Windsurf&#xff0c;就在昨天&#xff0c;字节跳动发布了最新的IDE&#xff0c;就叫Trae…

Linux TCP 之 RTT 采集与 RTO 计算

我们来看看 Linux TCP 采集 RTT 的函数 tcp_rtt_estimator&#xff0c;看注释&#xff0c;充满了胶着。 但在那个谨慎的年代&#xff0c;这些意味着什么&#xff1f; RTT 最初仅用于 RTO 的计算而不是用于调速&#xff0c;RTO 的计算存在两个问题&#xff0c;如果过估&#x…

学习ASP.NET Core的身份认证(基于JwtBearer的身份认证9)

测试数据库中只有之前记录温湿度及烟雾值的表中数据较多&#xff0c;在该数据库中增加AppUser表&#xff0c;用于登录用户身份查询&#xff0c;数据库表如下所示&#xff1a;   项目中安装SqlSugarCore包&#xff0c;然后修改控制器类的登录函数及分页查询数据函数&#xff…

leetcode-75-颜色分类

文章目录 1. 归并排序2. 计数3. 按照题目要求&#xff0c;原地腾挪 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地 对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表…

html,css,js的粒子效果

这段代码实现了一个基于HTML5 Canvas的高级粒子效果&#xff0c;用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析&#xff1a; HTML部分 使用<!DOCTYPE html>声明文档类型。<html>标签内包含了整个网页的内容。<head>部分定义了网页的标题&#x…

学习记录之原型,原型链

构造函数创建对象 Person和普通函数没有区别&#xff0c;之所以是构造函数在于它是通过new关键字调用的&#xff0c;p就是通过构造函数Person创建的实列对象 function Person(age, name) {this.age age;this.name name;}let p new Person(18, 张三);prototype prototype n…

go语言zero框架通过chromedp实现网页在线截图的设计与功能实现

在 GoZero 框架中实现网页在线截图的功能&#xff0c;可以通过集成 chromedp 库来控制 Chrome 浏览器进行截图。chromedp 是一个基于 Chrome DevTools 协议的 Go 包&#xff0c;可以用来在 Go 程序中模拟浏览器操作&#xff0c;如页面截图、DOM 操作、表单提交等。 下面是一个…

以 RFID 为钥,开启民兵装备管理的科技之门

民兵配备的武器及装备涵盖了各式武器、弹药及军事技术设备&#xff0c;其管理的优良直接决定了民兵的作战效能。鉴于民兵装备普遍面临老化、维护支援不充分等问题&#xff0c;迫切需要迅速建立完善的民兵装备管理新体系。这一转变将推动民兵装备由数量扩张转向质量提升&#xf…

电脑办公技巧之如何在 Word 文档中添加文字或图片水印

Microsoft Word是全球最广泛使用的文字处理软件之一&#xff0c;它为用户提供了丰富的编辑功能来美化和保护文档。其中&#xff0c;“水印”是一种特别有用的功能&#xff0c;它可以用于标识文档状态&#xff08;如“草稿”或“机密”&#xff09;、公司标志或是版权信息等。本…

llama-factory实战: 基于qwen2.5-7b 手把手实战 自定义数据集清洗 微调

基于qwen2.5 手把手实战 自定义数据集 微调&#xff08;llama-factory&#xff09; 准备工作1.数据集准备&#xff08;例:民法典.txt&#xff09;2.服务器准备&#xff08;阿里云 DSW 白嫖&#xff09;3.环境配置pip 升级模型下载微调助手 4.数据集处理脚本文件4.1文本分割(ber…

微透镜阵列精准全检,白光干涉3D自动量测方案提效70%

广泛应用的微透镜阵列 微透镜是一种常见的微光学元件&#xff0c;通过设计微透镜&#xff0c;可对入射光进行扩散、光束整形、光线均分、光学聚焦、集成成像等调制&#xff0c;进而实现许多传统光学元器件难以实现的特殊功能。 微透镜阵列&#xff08;Microlens Array&#x…

详解单片机学的是什么?(电子硬件)

大家好&#xff0c;我是山羊君Goat。 单片机&#xff0c;对于每一个硬件行业的从业者或者在校电子类专业的学生&#xff0c;相信对于这个名词都不陌生&#xff0c;但是掌没掌握就另说了。 那单片机到底学的是什么呢&#xff1f; 其实单片机在生活中就非常常见&#xff0c;目前…