elmentui表单重置及出现的问题

一、表单:

二、代码——拿官方的代码举例(做了一些小改动):

改动:model绑定的字段,由form改为queryParams

ref绑定的字段form改为queryFrom

注:model绑定的这个字段用来做数据双向绑定的

注:ref绑定的这个字段用来清空表单数据的

<el-form ref="queryForm" :model="queryParams" label-width="80px"><el-form-item label="活动名称" prop="name"><el-input v-model="queryParams.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="queryParams.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" prop="date"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="queryParams.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="queryParams.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="queryParams.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="queryParams.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="queryParams.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="queryParams.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>

三、数据初始化:

 data() {return {queryParams: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},

注:这里不要图省事,直接写queryParams:{},这样的话可能会产生一些问题,由于视图模型,模型都没有,他页面渲染的时候,你改变数据的话,就找不到这个模型了, 如下图:

重置表单时,输入框,下拉框输入的内容就无法呈现。

四、表单重置,另外,要加prop字段,不然重置方法、表单校验方法不生效

像上面的活动时间,一个表单项,绑定两个不同的值,我们可以直接用this.queryParam.字段1=null进行重置

    /** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.queryParams.date1=null;this.queryParams.date2=null;},

 

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

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

相关文章

【微服务部署】五、Jenkins+Docker一键打包部署NodeJS(Vue)项目的Docker镜像步骤详解

NodeJS&#xff08;Vue&#xff09;项目也可以通过打包成Docker镜像的方式进行部署&#xff0c;原理是先将项目打包成静态页面&#xff0c;然后再将静态页面直接copy到Nginx镜像中运行。 一、服务器环境配置 前面说明了服务器Nginx的安装和配置&#xff0c;这里稍微有些不同&a…

数学建模:拟合算法

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;拟合算法 文章目录 数学建模&#xff1a;拟合算法拟合算法多项式拟合非线性拟合cftool工具箱的使用 拟合算法 根据1到12点间的温度数据求出温度与时间之间的近似函数关系 F ( t ) F(…

【AI】机器学习——绪论

文章目录 1.1 机器学习概念1.1.1 定义统计机器学习与数据挖掘区别机器学习前提 1.1.2 术语1.1.3 特点以数据为研究对象目标方法——基于数据构建模型SML三要素SML步骤 1.2 分类1.2.1 参数化/非参数化方法1.2.2 按算法分类1.2.3 按模型分类概率模型非概率模型逻辑斯蒂回归 1.2.4…

无涯教程-Android Online Test函数

Android在线测试模拟了真正的在线认证考试。您将看到基于 Android概念的多项选择题(MCQ),将为您提供四个options。您将为该问题选择最合适的答案,然后继续进行下一个问题,而不会浪费时间。完成完整的考试后,您将获得在线考试分数。 总问题数-20 最长时间-20分钟 Start Test …

动手学深度学习(五)Kaggle房价预测

Kaggle房价数据集&#xff0c;前四个为房价特征&#xff0c;最后一个为标签&#xff08;房价&#xff09;。 一、下载数据集 import numpy as np import pandas as pd import torch from torch import nn from d2l import torch as d2l import hashlib import os import tarfi…

百度文心一言GPT免费入口也来了!!!

文心一言入口地址&#xff1a;文心一言能力全面开放 文心一言是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。 文心一言的技…

Keil Flash的下载算法

更进一步的了解Keil Flash的下载算法 前面提到了通用算法的选择&#xff0c;那么问题来了&#xff0c;这个算法文件如何来的呢&#xff1f;如果你所用的MCU不是默认支持的品牌&#xff0c;如何编写属于自己的算法呢&#xff1f; 工具/原料 Keil uVision ULINK2仿真器 方法/…

Vulnstack----5、ATTCK红队评估实战靶场五

文章目录 一 环境搭建二 外网渗透三 内网信息收集3.1 本机信息收集3.2 域内信息收集 四 横向移动4.1 路由转发和代理通道4.2 抓取域用户密码4.3 使用Psexec登录域控4.4 3389远程登录 五、痕迹清理 一 环境搭建 1、项目地址 http://vulnstack.qiyuanxuetang.net/vuln/detail/7/ …

使用docker部署db2

1.使用docker部署db2 1.1 拉db2镜像 将db2镜像拉起到本地。 docker pull ibmcom/db21.2启动容器 docker run -d -p 50000:50000 --name db2 --privilegedtrue -e DB2INST1_PASSWORDdbPassword DBNAMEjumpdb -e LICENSEaccept -v /usr/local/db2:/database ibmcom/db2实例化…

详解TCP/IP的三次握手和四次挥手

文章目录 前言一、TCP/IP协议的三次握手1.1 三次握手流程 二、TCP/IP的四次挥手2.1 四次挥手流程 三、主要字段3.1、标志位&#xff08;Flags&#xff09;3.2、序号&#xff08;sequence number&#xff09;3.3、确认号&#xff08;acknowledgement number&#xff09; 四、状态…

视频监控/视频汇聚/视频云存储EasyCVR平台HLS流集成在小程序无法播放问题排查

安防视频/视频云存储/视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求&#xff0c;让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上&#xff0c;视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频…

如何快速搭建母婴行业的微信小程序?

如果你想为你的母婴行业打造一个独特的小程序&#xff0c;但没有任何编程经验&#xff0c;别担心&#xff01;现在有许多小程序制作平台提供了简单易用的工具&#xff0c;让你可以轻松地建立自己的小程序。接下来&#xff0c;我将为你详细介绍搭建母婴行业小程序的步骤。 首先&…