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


Posted in Javascript onAugust 03, 2020

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

首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件,

然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候清空一下,在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据,页面不会有之前的数据存在,也不会出现验证信息在页面上。

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

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 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 #Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python交互式图形编程实例(二)
2017/11/17 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
主管职责范文
2013/11/09 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
中医专业应届生求职信
2013/11/17 职场文书
计算机相关的自我评价
2014/01/15 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
标准毕业生自荐信
2014/06/24 职场文书
医院义诊活动总结
2014/07/04 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书