全国咨询热线:18720358503

如何制作小程序_vue 添加和修改用同一个表单,e

类别:媒体报道 发布时间:2021-01-05 浏览人次:

vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作       这篇文章主要介绍了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" :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 
 el-button size="small" type="primary" @click="saveContact" {{form.id '编辑':'添加'}} /el-button 
 el-button size="small" @click="closeDialog" 取 消 /el-button 
 /div 
 /el-dialog 
 /template 

{ required: true, message: "请输入邮箱", trigger: "change" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] } phone: [ { required: true, message: "请输入手机号", trigger: "change" } computed: { //通过pro凡科抠图的数据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表单提交后清空表单数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


推荐阅读

如何制作小程序_vue 添加和修改用同一个表单,e

vue 加上和编写用同一个表格,el-form表格递交后清除表格数据信息实际操作 本文关键详细介绍了vue 加上和编写用同一个表格,el-form表格递交后清除表格数据信息实际操作,具备非常...

2021-01-05
分销商城系统解决方法-企业网站建设目录设计方

列表是网站建设中比较常见的元素设计,对网站信息量的展示,列表有着天然的优势,因而在门户网站或是商城网站中,也是较为常见的。列表设计历史悠久,但在设计上依然有很多细...

2021-01-05
小程序直播刚上线_Vue的Options用法说明

Vue的Options使用方法表明 本文关键详细介绍了Vue的Options使用方法表明,具备非常好的参照使用价值,期待对大伙儿有一定的data:內部数据信息适用目标和涵数,优先选择用涵数n...

2021-01-05
如何编写手机小程序_Vue 电商后台管理项目阶段性

Vue 电子商务后台管理管理方法新项目环节性小结(强烈推荐) 本文关键详细介绍了Vue 电子商务后台管理管理方法新项目环节性小结,文中给大伙儿详细介绍的十分详尽,对大伙儿的...

2021-01-05
广州凡科互联网科技股份有限公司招聘买手

招聘人数:14职位信息岗位职责:1、根据企业经营发展的需要,制定采购计划及开发供应商,完成公司下达的采购目标。2、根据采购计划及采购需求,利用各种渠道与方式开发评选供应...

2021-01-05
h5免费模板在哪里找-服务 > 网站建设

公司、团体、院校、政府部门官方网站深层次分析公司要求,致力于于塑造优良的公司知名品牌品牌形象,健全公司对里外的散播要求。积极主动帮助公司寻找发展趋势发展战略关键,...

2021-01-05
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信