精华内容
下载资源
问答
  • 数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决...
  • 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>
    

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

    展开全文
  • 在使用ElementUI的from表单的重置时总是不行,无法通过this.$reds[formName].resetFields()清空表单数据 后来查找资料,看博客总结如下: 1. 给表单加别名 在<el-form>标签中加ref属性 <el-form ref=...

    Vue+ElementUI表单Form重置resetFields()无法重置表单的问题

    在使用ElementUI的from表单的重置时总是不行,无法通过this.$reds[formName].resetFields()清空表单数据

    后来查找资料,看博客总结如下两种方法:

    方法一

    form表单数据赋值为{}

    this.form = {};
    

    即可。

    方法二

    方法二是调用Form表单的resetFields()方法,比较繁琐

    1. 给表单加别名

    <el-form>标签中加ref属性

    <el-form ref="userForm" ...>
    	......
    </el-form>
    

    2. form的每个itemprop属性(这里最坑)

    form的每个itemprop属性,并且prop的名字需要和绑定的数据的名称一致,注意prop的属性是加到<form-item>标签上的

    <el-form-item label="姓名" prop="name">
       <el-input v-model="form.name"></el-input>
    </el-form-item>
    

    3. 绑定点击事件中传入Form的ref名字

    <el-form-item>
    	<el-button @click="addCancel('userForm')">取消</el-button>
    </el-form-item>
    

    4. 注册点击事件

    methods中注册点击事件,再事件中调用resetFields()方法清空Form表单。

    addCancel(formName) {
        this.$refs[formName].resetFields();
    }
    

    注意:要清空的地方必须绑定prop属性,并且和form中数据的最后的名字一致,否则不能清空

    展开全文
  • elementui在重置表单时,无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据; elementui 设置rules后没有效果 解决方法: 1、表单加ref属性 <el-form ref="refname"></el-form> 2、form的...

    问题:

    • elementui在重置表单时,无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据;
    • elementui 设置rules后没有效果

    解决方法:
    1、表单加ref属性

    <el-form ref="refname"></el-form>
    

    2、form的每个item加prop属性(踩了好久的坑这个,需要和绑定数据的最后名称一致,prop属性添加到form-item上)

    <el-form-item prop="name">
        <el-input v-model="query.name"></el-input>
    </el-form-item>
    

    3、绑定点击事件中传入refname

    <el-form-item>
        <el-button @click="resetForm('refname')">清空</el-button>
    </el-form-item>
    

    4、注册事件

    restForm(refname) {
       this.$refs[refname].resetFields()
    }
    
    • 5、检查是否有初始值
      data数据上需要挂载表单数据初始值为''

    如果使用了$store.state.fm.plan管理关联表单数据,那么在form中需要添加:model="$store.state.fm"
    赶紧试试吧,可以的话记得点赞喽

    文章转自:https://my.oschina.net/yxmBetter/blog/1535157
    感谢作者:YXMBetter

    展开全文
  • elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据; elementui 设置rules后没有效果; 解决方法: 1、表单加ref属性 <el-form ref="refname"></el-form> 2、...

    问题:

    elementui在重置表单时,无法使用this.$refs['formRefVal'].resetFields()清空表单数据;

    elementui 设置rules后没有效果;

    解决方法:

    1、表单加ref属性

    <el-form ref="refname"></el-form>
    

    2、form的每个item加prop属性(踩了好久的坑这个,需要和绑定数据的最后名称一致,prop属性添加到form-item上)

    <el-form-item prop="name">
        <el-input v-model="query.name"></el-input>
    </el-form-item>
    

    3、绑定点击事件中传入refname

    <el-form-item>
        <el-button @click="resetForm('refname')">清空</el-button>
    </el-form-item>
    

    4、注册事件

    restForm(refname) {
       this.$refs["refname"].resetFields()
    }
    
    + 5、检查是否有初始值
    在data数据上需要挂载表单数据初始值为''
    展开全文
  • 问题原因分析 vue element ui在做编辑和添加时候通常使用一个dialog 弹框...element Ui新增表单的时候,表单默认数据是新增get_new_data,编辑的时候表单默认数据是get_edit_data,这两个数据只能填一个,根据当前状态
  • 平时开发过程中,我们通常在“添加”和“编辑”页面中置“清空”、“返回”按钮,所以通常我们会使用resetFields()清空表单数据。 2、resetFields()不生效的原因 1.此方法用于将form表单的数据设置为初始值。 2....
  • 问题:使用 el-dialog+表单发现无法使用 this.$refs[‘form’].resetFields()清空表单 问题分析:this.$refs[‘form’].resetFields()本质是将表单数据恢复至初始状态;打开表单之前el-dialog中的内容尚未渲染, //...
  • 数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,...
  • vue 无法对未定义的值、空值或基元值设置反应属性报错 ...比如我们在写一个表单,提交成功后要清空表单 我把数据绑在上面了方便看,确定提交成功我们一般要清空input,而我在js里开始这样写 我写的时候提交成功直...
  • Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值、空值或基元值设置反应属性:比如我们在写一个表单,提交成功后要清空表单我把数据绑在上面了方便看,确定提交成功我们...
  • 就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model...
  • 就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model...
  • 就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现事vue的model绑定和lyui冲突产生的,事实上是vue无法动态绑定lyui中获取到的日期值,我们把那个v-model去掉...
  • <p>vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调 <h2>2. computed 的实现原理 <p>computed 本质是一个惰性...
  • 替换u-form-item.vue全文 <pre><code> <template> <view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': ...
  • 文件上传表单控件和图片文件预览 服务器端如何处理上传的文件 Day53 - 异步任务和定时任务 网站优化第二定律 配置消息队列服务 在项目中使用celery实现任务异步化 在项目中使用celery实现定时任务 Day54 - ...

空空如也

空空如也

1 2
收藏数 21
精华内容 8
关键字:

vue无法清空表单数据

vue 订阅