element-ui组件dialog遇到form
Vue.js似乎成了一种潮流。
UI框架element-ui也跟着成了一种潮流,不过得承认,至少我个人还是非常认可的,element-ui做的是真不错。
用到element-ui,那么在dialog中搭配form就必不可少。
<el-dialog
:visible.sync="visible"
title="弹窗"
:before-close="beforeClose"
@open="openDialog"
width="480px"
>
<el-form
:model="form"
:rules="rules"
ref="form"
>
<el-form-item
label="操作人"
prop="operator"
>
<el-input
placeholder="请输入操作人"
v-model.trim="form.operator"
></el-input>
</el-form-item>
</el-form>
<div
slot="footer"
class="dialog-footer"
>
<el-button
@click="submit"
type="primary"
class="btn-custom"
>
<span>确 定</span>
</el-button>
</div>
</el-dialog>
弹窗内有form表单,而且这个表单需要校验,那么如果目前输入框校验报错之后,或者输入之后,关闭弹窗了,在当前页面,再次打开该弹窗,会显示上一次的输入值以及报错提示。
这就产生了一个小需求,弹框打开之后,需要把所有form表单重置为初始状态。需求很小,也很正常,然而解决这个问题,前期走了很多弯路。
查看一下,dialog的事件:
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
open | Dialog 打开的回调 | —— |
opened | Dialog 打开动画结束时的回调 | —— |
close | Dialog 关闭的回调 | —— |
closed | Dialog 关闭动画结束时的回调 | —— |
那么只能从这4个事件中考虑,要不在打开弹窗的时候,清除数据。要不在关闭弹窗的时候,清除数据。
比对之后,结合需求,可以考虑open,在弹框打开时清除数据,closed,弹框已经完全关闭之后,清除数据。
最开始,我是在closed之后,清除form表单的数据的。
在el-dialog标签上添加:
@closed="closeDialog"
添加方法:
closeDialog (formName) {
this.$refs[formName].resetFields()
}
这里容易产生一个新的问题,如果需要向上层组件传递form表单内用户填充的数据:
this.$emit('sendFormData', this.form)
也就是点击Form表单的提交按钮,需要干两件事:sendFormData和resetFields,这时,不管这段代码如何组织,在上层组件当中,接收到的值,必然是resetFields之后的值。
所以,必须要把这两件事分开来干,sendFormData放在close事件当中,或者before-close属性当中,然后在closed事件当中,再进行resetFields。
亦或者,在closed事件中,进行this.$emit('sendFormData', this.form)
操作,然后在dialog open的时候,this.$refs[formName].resetFields()
。
这里有一点需要注意的是:
在第一次打开弹窗的时候,会产生一个错误提示
产生这么个错误的原因在于,初次打开弹窗,DOM节点还没有渲染完成,这时是取不到this.$refs[formName]的,那么跟着他调用resetFields这个函数,必然会报错。加一个简单的判断即可,if(this.$refs[formName]) this.$refs[formName].resetFields()
。
曾经踩过的坑,或者说还在踩着的坑,希望对即将会踩到的坑的同学们,有所帮助。
element-ui组件dialog遇到form的更多相关文章
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- 关于Element对话框组件Dialog在使用时的一些问题及解决办法
Element对话框组件Dialog在我们的实际项目开发中可以说是一个使用频率较高的组件,它能为我们展示提示的功能,如:业务模块提交前展示我们曾经输入或选择过的业务信息,或者展示列表信息中某项业务的具 ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
- Element UI组件说明
-<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...
- element ui里dialog关闭后清除验证条件
//vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogF ...
- vue问题五:element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
随机推荐
- JS -- Unexpected trailing comma
Unexpected trailing comma 后面多了一个逗号
- Android-Handler消息机制实现原理)(转)
Android-Handler消息机制实现原理 一.消息机制流程简介 在应用启动的时候,会执行程序的入口函数main(),main()里面会创建一个Looper对象,然后通过这个Looper对象开 ...
- 各个处理器架构ISA编程指南
1.Intel官方文档: http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manu ...
- android设置gps自动开启
1.第一种方法 private void toggleGPS() { Intent gpsIntent = new Intent(); gpsIntent.setClassName("com ...
- nginx使用场景
1. 对外开放本地封闭Server 本地server无法对外开放,nginx做反向代理,对外开发,使得外部可以访问封闭服务. upstream npm { server ; keepalive ; } ...
- JAVA 基础编程练习题47 【程序 47 打印星号】
47 [程序 47 打印星号] 题目:读取 7 个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*. package cskaoyan; public class cskaoyan47 { ...
- CockroachDB学习笔记——[译]在CockroachDB中如何让在线模式更改成为可能
原文链接:https://www.cockroachlabs.com/blog/how-online-schema-changes-are-possible-in-cockroachdb/ 原作者: ...
- BP神经网络算法预测销量高低
理论以前写过:https://www.cnblogs.com/fangxiaoqi/p/11306545.html,这里根据天气.是否周末.有无促销的情况,来预测销量情况. function [ ma ...
- xshell和Xftp连接虚拟机(转载)
首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...
- ORA-00054:Orcacle表锁定
查询被锁的session_id select session_id from v$locked_object; 查询结果----------------------SESSION_ID8 查询被锁se ...