resetFields方法重置表单

<!--* @Descripttion: resetFields方法重置表单* @version: * @Author: zhangfan* @email: 2207044692@qq.com* @Date: 2020-07-03 09:10:28* @LastEditors: zhangfan* @LastEditTime: 2020-07-24 14:49:07
--> <template><div class="tableBox"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.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="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-pickertype="date"placeholder="选择日期"v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.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="ruleForm.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="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template><script>
export default {data() {return {ruleForm: {name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: "",},rules: {name: [{ required: true, message: "请输入活动名称", trigger: "blur" },{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },],region: [{ required: true, message: "请选择活动区域", trigger: "change" },],date1: [{type: "date",required: true,message: "请选择日期",trigger: "change",},],date2: [{type: "date",required: true,message: "请选择时间",trigger: "change",},],type: [{type: "array",required: true,message: "请至少选择一个活动性质",trigger: "change",},],resource: [{ required: true, message: "请选择活动资源", trigger: "change" },],desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
</script>

重置表单要注意的事项：

resetFields方法重置表单相关推荐

Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
问题: 使用this.$ref['form'] .resetFields()无法重置表单项原因: 1.没有给表单添加ref属性 <el-form ref="form"> ...
element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
vue element form ref 重置表单
<template>&l ...
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
关于iview、element-ui重置表单并清除校验的方法
平时在使用iview或者vue重置表单是时,我会习惯使用 this.$refs[formData].resetFields(); 但是直接这样写上去方法是不起作用的, 内容必须要在每个form-ite ...
事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
js 重置表单 reset form
原文地址: http://www.hpboys.com/820.html 由于JQuery中,提交表单是像下面这样的: $('#yigeform').reset(); 但是,不幸的是,这样写的话,会有 ...
表单提交成功后重置表单
js提供了reset()重置表单的方法,但jquery本身没有提供reset()方法, 这就导致了表单提交后jquery不能直接重置表单而使得用户可以重复提交,那怎么解决这个问题呢? 很简单,把jqu ...

resetFields方法重置表单

resetFields方法重置表单相关推荐

最新文章

热门文章