精华内容
下载资源
问答
  • 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属性起的名字
    展开全文
  • 前段时间在租个后台的项目,有两处需要一键清空表单数据 一、表单筛选后,需要可以一键清空或者恢复初始化筛选条件 初始化查询数据: 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 一键清空表单的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue清空form表单数据踩坑

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

    关闭弹出框时,想要清空里面的form表单数据

    this.$refs['form'].resetFields()
    

    但是再次点开时发现只清空了一部分,检查后发现在写form-item时漏掉了prop,如下:

    <el-form-item label="主题描述" prop="themeDesc" class="input-item">
    
    展开全文
  • 主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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>
    

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

    展开全文
  • 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 表单清空报错

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

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

    千次阅读 2020-03-10 17:21:28
    在项目中,有时候需要一键清空表单的功能, 1. 使用elements提供的表单重置方法 如果使用的是饿了么的form表单,可以直接采用提供的表单重置方法 <el-form :model="form" :rules="rules" ref="form1"> ref绑定...
  • 温馨提示:想要自制表单验证的请看上一篇 ...// 表单数据 const form = reactive({ // 用户名 account: null, // 密码 password: null, // 手机号 mobile: null, // 验证码 code: null, // 是否...
  • 但是当第二次打开表单的时候,发现选中的数据还在,这是需要清空前一次选中的数据 我写的表单是在弹框里的,效果如下 关键部分 在每一次打开弹框的时候,都清空数据: handleOpenModal() { this.ruleForm = { ...
  • 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.
  • vue清空表单常用方法

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

    千次阅读 2020-03-07 13:09:48
    添加before-close属性 写上方法 结果
  • 应用场景: 在使用vue的el-form填写表单数据, 在点击确认或者取消按钮后,希望下一次再打开表单时,表单是空的。 表单如下: 这里需要注意要给表单加上ref属性,并且在el-form-item 加上prop属性,否则会导致清空不了...
  • html表单美化 与 vue表单数据的自动搜集html表单html表单美化html表单数据提交vue表单数据自动搜集 html表单 input 文本框 <input type="text" placeholder="请输入姓名" value="内容"/> 密码框 <...

空空如也

空空如也

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

vue无法清空表单数据

vue 订阅