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 相关文章推荐
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
pm2启动ssr失败的解决方法
Jun 29 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
js实现扫雷源代码
Nov 27 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php实现微信公众号无限群发
2015/10/11 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
简单谈谈javascript代码复用模式
2015/01/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python 备份程序代码实现
2017/03/06 Python
python实现聚类算法原理
2018/02/12 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Django 反向生成url实例详解
2019/07/30 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python如何实现单链表的反转
2020/02/10 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
500行python代码实现飞机大战
2020/04/24 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
一文读懂Python 枚举
2020/08/25 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
意大利男装网店:Vrients
2019/05/02 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
公证书标准格式
2014/04/10 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
运动会广播稿20字
2015/08/19 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
总结几个非常实用的Python库
2021/06/26 Python