element-ui后台管理系统表单resetFields功能实现
项目中有‘新增’和‘编辑’弹出dialog功能,并且为同一个dialog。
html代码:

新增时,这样的样式

编辑时,这样的样式

所以在编辑完关闭dialog后,需要清空表单,一开始简单的使用了element-ui自带的resetFie(在关闭dialog之前),如下
this.$refs.diamondForm.resetFields();
但是测试的过程中,跟想象中的并不一样,多次出现清空不彻底的问题。
后来,借用element-ui的open事件 @open="openDialog"(即Dialog 打开的回调)添加一些逻辑处理

同样的在关闭dialog之前,运行如下清空
this.$refs.diamondForm.resetFields();
element-ui后台管理系统表单resetFields功能实现的更多相关文章
- Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- vue 使用 element ui动态添加表单
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...
- Element ui 中的表单提交按钮多次点击bug修复
- vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
- phpcms v9 的表单向导功能的使用方法
本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...
- phpcms v9 的表单向导功能的使用方法 附多个案例
本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...
- js之表单记忆功能
在项目中,我们难免会遇到希望相同用户操作本次打开页面时可以展现或者自动记录上次登录系统点击过的的复选框,单选按钮等操作的状态,也就是表单记忆功能,这时,一个很重要的技术便派上了用场,即cookie. ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
随机推荐
- DOM修改元素的方法总结
今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...
- 一个基于Asterisk构建的VOIP应用软件:Elastix介绍
Elastix 是一种应用软件,它整合了适用于那些基于 Asterisk 的 PBX 的最好工具,并将它们集成为单一的.易用的接口.同时,它增加了自己的工具集,以及允许创建第三方模块来使 Elasti ...
- [idea]Error:java: invalid source release: 1.8 标签: idea 2017-02-24 15:50 961人阅读
最近用idea敲struts,虽然idea的界面很好看,代码提示也很强大,不过也的确是碰到了一些在eclipse上从来没有碰到过的问题,而且我发现,idea的错误,很多都是在外国的网站上提问的人比较多 ...
- 【转载】获取更多/proc/fd中有关socket的信息
Q: Looking in /proc/$mypid/fd/, I see these files lrwx------ cm_user cm_user Oct : -> /dev/pts/ ( ...
- python 逗号分隔值文件的操作
- oralce update操作
1.基本语法:update 表名 set 列名=表达式 [列名=表达式. . . ] where 条件 2.使用的注意事项: v UPDATE语法可以用新值更新原有表行中的各列 把zs的性别改为女 ...
- Java练习 SDUT-3349_答答租车系统(面向对象综合练习)
答答租车系统(面向对象综合练习) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 各位面向对象的小伙伴们,在学习了面向对 ...
- Mybatis表关联多对多
创建表 创建表对应的 JavaBean 对象 package com.tanlei.newer.model; import java.util.List; /** * @author:Mr.Tan * ...
- 04使用harbor配置私仓
安装harbor之前,需要安装好Python,Docker,DockerCompose.Python需要2.7以上的版本,Docker需要1.10以上的版本:Docker Compose 需要1.6. ...
- 阿里云BaaS:降低区块链应用门槛,用技术构建商业互信
5月8日,阿里云召开区块链服务(BaaS)商业化发布会,会上对BaaS产品.业务应用场景及生态策略进行了全面解读. 对于广大IT服务商和开发者而言,构建区块链应用存在三大痛点问题:成本高,研发投入大. ...