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 ...
随机推荐
- HDU4251-The Famous ICPC Team Again(划分树)
Problem Description When Mr. B, Mr. G and Mr. M were preparing for the 2012 ACM-ICPC World Final Con ...
- 洛谷1602 Sramoc问题
刚看到这道题的时候感觉像spfa. 然后发现其实bfs就可以做了. //Serene #include<algorithm> #include<iostream> #inc ...
- 2018-8-9-win10-uwp-装机必备应用-含源代码
title author date CreateTime categories win10 uwp 装机必备应用 含源代码 lindexi 2018-8-9 9:7:31 +0800 2018-8-9 ...
- Effective C++: 03资源管理
所谓资源,就是一旦用了它,将来必须还给系统.C++中的资源有:内存.文件描述符.互斥锁.数据库连接.网络socket等. 13:以对象管理资源 1:像下面这个函数: void f() { Invest ...
- LeetCode110 Balanced Binary Tree
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- C++第一次作业(循环语句的使用)
一.知识点 循环结构 二.教学目的 掌握while和do...while循环语句在C++中的写法 三.教学内容 1.while语句 (1)执行顺序:先判断表达式(循环控制条件)的值,若表达式的值为tr ...
- WPF 2048游戏的实现
原文:WPF 2048游戏的实现 前几天空闲的时候,实现了一个2048游戏.除了可以设置行数和列数之外,支持修改显示名称,比如下面,改成神雕侠侣中的角色名称: 游戏 ...
- HDU-2859_Phalanx
Phalanx Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- Java练习 SDUT-1217_蟠桃记
蟠桃记 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 孙悟空在大闹蟠桃园的时候,第一天吃掉了所有桃子总数一半多一个,第 ...
- 10Redis键空间通知(keyspace notifications)
Redis的键空间通知(keyspace notifications)功能是自2.8.0版本开始加入的,客户端可以通过订阅/发布(Pub/Sub)机制,接收那些以某种方式改变了Redis数据空间的事件 ...