精华内容
下载资源
问答
  • 主要介绍了vue 添加和编辑用同一个表单,el-form表单提交清空表单数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue 一键清空表单的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中提交表单后如何清空

    千次阅读 2018-06-12 14:45:00
    只需要在提交方法里写上this.form={brand_right:0}即可。 转载于:https://www.cnblogs.com/YMoonwind/p/9172952.html

    只需要在提交方法里写上this.form={brand_right:0}即可。

     

    转载于:https://www.cnblogs.com/YMoonwind/p/9172952.html

    展开全文
  • Vue清空表单数据

    千次阅读 2021-01-22 09:31:00
    表单添加ref属性 表单项el-form-item要添加prop属性,prop属性需要与input框绑定数据的最后名称一致,如v-model=“form.username”, prop则应该为 prop=“username” 通过this.$refs.xxx.resetFields(); 此处xxx为...
    1. 给表单添加ref属性
    2. 表单项el-form-item要添加prop属性,prop属性需要与input框绑定数据的最后名称一致,如v-model=“form.username”, prop则应该为 prop=“username”
    3. 通过this.$refs.xxx.resetFields(); 此处xxx为form内ref属性起的名字
    展开全文
  • vue 添加和编辑用同一个表单,el-form表单提交清空表单数据 在项目做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是...

    vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据

    在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿

    1. 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件,
    2. 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候清空一下,在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据,页面不会有之前的数据存在,也不会出现验证信息在页面上。
      在这里插入图片描述
      1. 在父级页面调用子级弹框表单组件(AddEdit.vue)
     <!-- form是子组件的form表单数据,meg是子组件弹窗的标题(添加或者编辑) -->
     <!-- <add-edit :msg.sync="msg" v-if='msg' :form='form'></add-edit> -->
      <!-- 没有使用v-if 是因为频繁点击编辑和新增的话,性能方面不是很好-->
    <template>
    	<el-button @click='addClick'>添加</el-button>
    	<el-button @click='editClick(scope.row)'>编辑</el-button>
    	<!-- 子组件弹窗 -->
    	<add-edit :msg.sync="msg" :form='formData'></add-edit>
    </template>
    <script>
    export default {
    	data() {
    		return {
    			formData: {}
    		}
    	},
    	
    	methods: {
    		addClick() {
    		//需要将子组件需要的对象属性传过去,这一步必须得有,这样在子组件才可以清空表单
    			this.formData = {
    				name: '',
    				email: '',
    				phone: ''
    			}
    			this.msg = '添加'
    		},
    		
    		editClick(row) {
    			this.formData = row;
    			this.msg = '编辑'
    		}
    	}
    }
    </script>
    

    2. 点击父级页面的编辑按钮,将人员信息传递给AddEdit.vue

    <template>
      <el-dialog :visible.sync="isShow" width="500px" class="edit-contact" :before-close="closeDialog">
        <span slot="title">{{msg}}联系人</span>
        <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules" size="small">
          <el-form-item :label="it.label" :prop="it.prop" v-for="it in formLabel" :key="it.prop">
            <el-input v-model="form[it.prop]" :placeholder="`请输入${it.label}`"></el-input>
          </el-form-item>
        </el-form>
        <div class="base-btn-action">
          <el-button size="small" type="primary" @click="saveContact">{{form.id?'编辑':'添加'}}</el-button>
          <el-button size="small" @click="closeDialog">取 消</el-button>
        </div>
      </el-dialog>
    </template>
    
    <script>
    export default {
      props: {
        msg: {
          //“添加”或者“编辑”
          type: String,
          default: ""
        },
        form: {
        //接收父组件传过来得对象数据
          type: Object,
          default: () => {}
        }
      },
      data() {
        return {
          formLabel: [
            { label: "姓名", prop: "name" },
            { label: "邮箱", prop: "email" },
            { label: "联系方式", prop: "phone" }
          ],
          rules: {
            name: [{ required: true, message: "请输入姓名", trigger: "change" }],
            email: [
              { required: true, message: "请输入邮箱", trigger: "change" },
              { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] }
            ],
            phone: [
              { required: true,  message: "请输入手机号", trigger: "change" }
            ]
          }
        };
      },
      computed: {
      //通过props的数据msg的值是否为空来判断弹框显示与否
        isShow() {
          return this.msg === "" ? false : true;
        }
      },
      watch: {
     	//监听子组件弹窗是否打开
    	  msg(n) {
    	  	//子组件打开得情况
    	      if (n !== '') {
    	        if (!this.$refs.ruleForm) {
    	        //初次打开子组件弹窗的时候,form表单dom元素还没加载成功,需要异步获取
    	          this.$nextTick(() => {
    	            this.$refs.ruleForm.resetFields() // 去除验证
    	          })
    	        } else {
    	        //再次打开子组件弹窗,子组件弹窗的form表单dom元素已经加载好了,不需要异步获取
    	          this.$refs.ruleForm.resetFields() // 去除验证
    	        }
    	      }
    	    },
      },
      methods: {
        closeDialog() {
          this.$emit("update:msg", "");
          setTimeout(() => {
          //关闭弹窗的时候表单也重置为初始值并移除校验结果
            this.$refs.ruleForm.resetFields();
          }, 200);
        }
      }
    };
    </script>
    

    好了,问题解决了,在此记录一下,以后可以翻回来再看看

    展开全文
  • 前段时间在租个后台的项目,有两处需要一键清空表单数据 一、表单筛选后,需要可以一键清空或者恢复初始化筛选条件 初始化查询数据: 1.在created钩子深拷贝了一份数据模板: 这个时候this.defaultUserFormSearch...

    前段时间在租个后台的项目,有两处需要一键清空表单数据

    一、表单筛选后,需要可以一键清空或者恢复初始化筛选条件

    初始化查询数据:

    user Form Search:{
    	username:null,
    	showname:null,
    	status:null
    }
    
    1.在created钩子深拷贝了一份数据模板:

    这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份

    2.在清空按钮事件触发后,再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch
    注意:这里一定还要是深拷贝,
    

    this.userFormSearch = this.defaultUserFormSearch;(这种做法是错误的); 如果清空的时候不深拷贝备份的数据this.defaultUserFormSearch,那么this.defaultUserFormSearch将会和this.userFormSearch关联上,

    后面清空之后修改了this.userFormSearch会牵扯到this.defaultUserFormSearch也被修改,再去清空就会有问题

    我们每个页面查询条件都很多,这里只是拿了最少的一个举例子,如果查询条件更多,我们清空的当然也可以采用下面的方式,
    这种方式也可以,只不过当里面项目比较多的时候,我们也要写好多代码

    或者我们直接把this.userFormSearch = {},我们status如果有默认值,那么这种暴力清除的方式也是不可以用的

    二、我们编辑弹窗,取消后或者关闭后,同样可以采用这种办法来清空哦。

    欢迎看到的同学或者前辈吐槽,或者告诉我还有更好的办法~

    展开全文
  • vue清空form表单数据踩坑

    万次阅读 2019-06-21 16:05:37
    关闭弹出框时,想要清空里面的form表单数据 this.$refs['form'].resetFields() 但是再次点开时发现只清空了一部分,检查后发现在写form-item时漏掉了prop,如下: <el-form-item label="主题描述" prop=...
  • ant design vue中关于表单清空的问题

    千次阅读 2021-01-12 11:07:49
    1.在ant design vue中使用表单首先要进行form注册,具体看官方文档解释。 2.当进行清空时,使用文档提供的resetFileds()方法,此操作必须在dom节点更新之后执行,所以需要加上this.$nextTick(()=>{})
  • 文章目录前言关键部分参考代码 前言 在使用vue elementui写表单的时候,选中了表单的数据后...在每一次打开弹框的时候,都清空数据: handleOpenModal() { this.ruleForm = { college: "", xi: "", grade: "", maj
  • vue3表单清空失效原因总汇 一定要加prop属性,否则清空不掉 ref绑定的名字一定要一致,否则还是清空不了 还有就是一定记住要return。。。。。 最后一步调用ruleForm.value.resetFields()即可清空了 ...
  • vue . form表单清空的方法

    万次阅读 2019-06-28 16:35:10
    this.$refs.XXX.resetFields()
  • vue清空表单

    2021-03-28 12:54:08
    1 报错:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘resetFields’ of undefined” 2 原因: 3 解决方法 其中ref是表单,prop是表单中的元素
  • vue表单清空方法

    千次阅读 2019-07-20 11:01:39
    vue表单清空方法 调用(releaseForm为表单名字) this.resetForm('releaseForm'); 或 @click="onSubmit('reportForm')" 方法 resetForm(formName) { //初始化表单 this.$nextTick(()=>{ this.$refs[formName]....
  • vue清空表单常用方法

    千次阅读 2020-04-30 09:47:52
    前言 this.$refs['form'].resetFields() 常规清空方式 this.form = {} 当表单深度拷贝的时候适用: this.form = JSON.parse(JSON.stringify(row))
  • ant-design-vue表单from清空,设置值

    千次阅读 2020-09-15 09:25:31
    err) {} } ant-design-vue表单from清空内容 //清空表单的内容,如果不清空,会存在之前填的内容 this.form.resetFields(); ant-design-vue表单from设置对应值 //给表单某个内容设置对应值 this.form....
  • vue中 使表单数据重置

    2021-10-26 22:02:09
    应用场景:在添加完成之后,下次再打开时,表单中数据应该要被清空 在关闭弹层时,showDialog的值会变成false,它会触发弹层(el-dialog组件)的close事件,所以,我们添加对监听即可。 解决方案: 代码...
  • 关于vue表单重置清空踩到的一些坑

    千次阅读 2019-11-08 22:37:09
    在resetForm()基本使用方法没错的时候,频繁用点击编辑按钮打开表单弹窗载关闭弹窗后,再新增表单时会发现表单并未在弹窗关闭时清空,并且使用重置按钮再直接重置表单也无法清空表单; eg: 编辑操作: ...
  • element form表单提交数据之后清空所有输入框 首先prop属性绑定的值要和v-mode绑定的值要统一 然后在提交数据成功之后加上下面这句话就可以在提交之后重置表单数据 this.$refs.form.resetFields()
  • 今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue清空表单信息

    千次阅读 2020-03-10 17:21:28
    在项目,有时候需要一键清空表单的功能, 1. 使用elements提供的表单重置方法 如果使用的是饿了么的form表单,可以直接采用提供的表单重置方法 <el-form :model="form" :rules="rules" ref="form1"> ref绑定...
  • vue element dialog清空表单

    千次阅读 2020-03-07 13:09:48
    添加before-close属性 写上方法 结果
  • 一直觉得,小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为,或者说,任何...而最让我“着迷”的,莫过于曾让我夜夜辗转反侧的“ 数据传递(数据绑定) ”了。趁着一次偶然提起,将其记录下来。
  • 设置窗口的表单数据为空,表单提交数据如下: data:{ fileList: { fileId: "", fileName: "" } } 在关闭方法设置表单数据为空: this.formList = this.$options.data().formList; 此时,重新打开后就...
  • vue 表单清空报错

    2020-06-14 20:29:35
    vue 表单清空报错 Cannot read property ‘resetFields’ of undefined this.$refs[‘ruleForm1’].resetFields(); 1、我们需要为每个form-item加上prop属性,要不然无法清空(大部分的问题就是出在这) 2、...
  • vue js 重置表单数据

    2020-11-10 19:13:19
    <el-form ref="loginFormRef" :model="loginForm"> <el-form-item prop="user"> <el-input v-model="loginForm.user"></el-input> <...el-input v-model="loginForm.p.
  • 解决办法:新增时加上这句话this.form={} //from是data定义的,把表单初始化为一个空对象,可以往这个对象里赋值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,103
精华内容 2,041
关键字:

vue中表单提交清空数据

vue 订阅