-
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2021-01-21 11:03:28数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决... -
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据
2019-09-16 15:37:50vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据 在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是...vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据
在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿
- 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件,
- 然后是主要用到了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+ElementUI表单Form重置resetFields()无法重置表单的问题
2021-01-24 17:08:15在使用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的每个
item
加prop
属性(这里最坑)form的每个
item
加prop
属性,并且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中数据的最后的名字一致,否则不能清空 -
vue + elementui表单重置 resetFields 问题(无法重置表单)
2019-07-31 16:23:11elementui在重置表单时,无法使用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 -
vue + element-ui表单重置 resetFields问题(无法重置表单)
2019-09-09 23:10:09elementui在重置表单时,无法使用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数据上需要挂载表单数据初始值为''
-
element ui dialog 表单点击编辑,再点击添加,数据无法清空问题 解决办法
2020-08-07 09:43:44问题原因分析 vue element ui在做编辑和添加时候通常使用一个dialog 弹框...element Ui新增表单的时候,表单默认数据是新增get_new_data,编辑的时候表单默认数据是get_edit_data,这两个数据只能填一个,根据当前状态 -
Vue中resetFields()方法清空无法其作用(element-ui)解决思路
2020-12-22 08:42:14平时开发过程中,我们通常在“添加”和“编辑”页面中置“清空”、“返回”按钮,所以通常我们会使用resetFields()清空表单数据。 2、resetFields()不生效的原因 1.此方法用于将form表单的数据设置为初始值。 2.... -
解决vue + element dialog弹框 表单无法重置问题
2020-11-05 17:57:50问题:使用 el-dialog+表单发现无法使用 this.$refs[‘form’].resetFields()清空表单 问题分析:this.$refs[‘form’].resetFields()本质是将表单数据恢复至初始状态;打开表单之前el-dialog中的内容尚未渲染, //... -
Vue Element-UI dialog弹框 表单 编辑后再点击新增 表单无法重置问题
2020-10-27 16:58:07数据的修改都是打开dialog(子组件)中进行操作的,但是在修改数据时,正常来说可以直接调用 this.$refs[str].resetFields() 直接清空,但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,... -
vue 无法对未定义的值、空值或基元值设置反应属性报错
2019-10-14 17:08:00vue 无法对未定义的值、空值或基元值设置反应属性报错 ...比如我们在写一个表单,提交成功后要清空表单 我把数据绑在上面了方便看,确定提交成功我们一般要清空input,而我在js里开始这样写 我写的时候提交成功直... -
vue对象属性为null_vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题...
2021-01-14 14:52:55Cannot set reactive property on undefined, null, or primitive value: //无法对未定义的值、空值或基元值设置反应属性:比如我们在写一个表单,提交成功后要清空表单我把数据绑在上面了方便看,确定提交成功我们... -
layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
2021-01-17 18:14:05就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model... -
详解Vue.js和layui日期控件冲突问题解决办法
2021-01-19 18:51:45就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model... -
Vue.js和layui日期控件冲突问题解决办法
2018-06-06 20:50:57就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现事vue的model绑定和lyui冲突产生的,事实上是vue无法动态绑定lyui中获取到的日期值,我们把那个v-model去掉... -
12道vue高频原理面试题,你能答出几道?
2020-12-26 11:47:58<p>vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调 <h2>2. computed 的实现原理 <p>computed 本质是一个惰性... -
在Form表单中校验复杂对象(嵌套属性)
2021-01-04 03:55:56替换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 - ...