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

(0)

相关推荐

  • Vue 实现列表动态添加和删除的两种方法小结

    下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g

  • vue表单数据交互提交演示教程

    欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://

  • vue+element-ui实现表格编辑的三种实现方式

    1.表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&

  • vue中input的v-model清空操作

    问题来源 写input组件的时候需求一个清空按钮,但是如果直接修改prop中父级的传值会报错.但是如果不修改父级无法更新值,也会带来开发的问题. 解决 v-model 完成大部分数据双向绑定 <input type="text" :value="inputValue" @change="$emit('change',$event.target.value)" @blur="$emit('blur',$event.target.va

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

    在项目中做联系人的添加和编辑功能,点击父级页面的添加和编辑按钮,用的是同一个表单弹窗,数据添加和编辑用同一个弹窗,没有在弹窗使用v-if,性能不是很好,弹窗中有表单,在编辑弹窗表单数据之后关闭弹窗,然后点击添加的时候,弹窗里的表单数据还是之前编辑的数据,无法做到清空表单数据,接下来是解决方法了,嘿嘿 首先是不管是添加还是编辑,都需要将子组件需要的对象属性一一写出来,传给子组件, 然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField(),在子组件表单弹窗打开的时候

  • Django表单提交后实现获取相同name的不同value值

    i前端:nput_test.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Search</title> <script> </script> </head> <body> <div><p>{{ result }}</

  • Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    1.前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下: 首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现. 2.我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

  • vue+elementUI 复杂表单的验证、数据提交方案问题

    当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量.输入字符数量显示.图片上传并显示.富文本 ... 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个 vue 文件中 所有的表单项显示隐藏.验证.数据获取.提交.自定义等逻辑放在一起 v-if/v

  • Vue 一键清空表单的实现方法

    前段时间在租个后台的项目,有两处需要一键清空表单数据 一.表单筛选后,需要可以一键清空或者恢复初始化筛选条件 初始化查询数据: 1.在created钩子深拷贝了一份数据模板: 这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份 2.在清空按钮事件触发后,再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch 注意:这里一定还要是深拷贝, this.userFormSea

  • 解决vue表单为空也能提交的问题

    目录 vue表单为空也能提交 大概是这样写的 vue的表单提交方式 vue表单收集和提交 vue表单为空也能提交 今天在用Vue写表单验证的时候,习惯性把v-model绑定的值设置为null,然后再测试的时候,发现如果填写了表单后,又删除输入的内容,竟然能提交上去,百思不得其解. 最后通过vue devtools这个工具找到了问题所在. 大概是这样写的 <input v-model="ipt"  /> data () {     return {         ipt:

  • laravel结合vue添加权限的实现示例

    目录 一.添加(权限)节点 1.1.引入vue 1.2.添加模版(vue.jquery) 1.3.添加节点控制器逻辑 1.4.模型中定义修改器 1.5.效果: 一.添加(权限)节点 1.1.引入vue 使用vue进行界面管理,实现添加功能 我们在这个目录下存入vue.js: 1.2.添加模版(vue.jquery) resources/admin/node/create.blade.php: <!--_meta 作为公共模版分离出去--> <!DOCTYPE HTML> <h

  • element-ui表单提交自动清空隐藏表单值实现

    目录 需求的开始 初步思路:标记方案 有别的超简单的方案? 继续标记方案 分析如何实现 具体如何实现在表单项组件添加显隐逻辑事件 结尾 需求的开始 一个表单,里面有很多表单项,然后需求通过特定的条件会触发某些表单项的显隐,条件会有很多很多,但是会有个问题,就例如: a输入框:显示状态,输入了值5,对应的属性值为5 通过了某个条件触发了让a输入框隐藏 a输入框:隐藏状态,对应的属性值为5 这个时候提交表单,后端就接收到a输入框的值,但是实际a输入框这个时候是隐藏状态,就是并不想接受到a输入框的值

  • 详谈Angular 2+ 的表单(一)之模板驱动型表单

    摘要 在企业应用开发时,表单是一个躲不过去的事情,和面向消费者的应用不同,企业领域的开发中,表单的使用量是惊人的.这些表单的处理其实是一个挺复杂的事情,比如有的是涉及到多个 Tab 的表单,有的是向导形式多个步骤的,各种复杂的验证逻辑和时不时需要弹出的对话框等等.笔者试图在这一系列文章中对 Angular 中的表单处理做一个相对完整的梳理. Angular 中提供两种类型的表单处理机制,一种叫模版驱动型(Template Driven)的表单,另一种叫模型驱动型表单( Model Driven

随机推荐