Home Web Front-end JS Tutorial The verification condition implementation code is cleared after the dialog is closed in element-ui

The verification condition implementation code is cleared after the dialog is closed in element-ui

Feb 27, 2018 am 09:19 AM
dialog element-ui verify

This article mainly shares with you a method to clear the verification conditions after closing the dialog in element ui. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Close dialog trigger event

//vue
 <!--添加用户dialog begin-->
   <el-dialog title="编辑用户" :visible.sync="dialogFormVisible"
     custom-class="editDialog"
     :close-on-click-modal="false"
     :before-close = "cleanContent"
     :show-close = "false"
     size=&#39;tiny&#39;>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <el-form-item label="账户名" prop="account" label-width="100px" >
 <el-col :span="20">
 <el-input v-model="ruleForm.account" ></el-input>
 </el-col>
 </el-form-item>
 </el-form>
 <p slot="footer" class="dialog-footer">
 <el-button @click="cancledialog(&#39;ruleForm&#39;)">取 消</el-button>
 </p>
</el-dialog>

//js
cancledialog(formRule){
   this.$refs[formRule].resetFields();
 }
Copy after login

Related recommendations:

Easyui uses Dialog inline button layout

Detailed explanation of the use and shutdown of jQuery plug-in artDialog.js

jQuery UI tutorial on using dialog

The above is the detailed content of The verification condition implementation code is cleared after the dialog is closed in element-ui. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Clair Obscur: Expedition 33 - How To Get Perfect Chroma Catalysts
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1278
29
C# Tutorial
1257
24
How to verify signature in PDF How to verify signature in PDF Feb 18, 2024 pm 05:33 PM

We usually receive PDF files from the government or other agencies, some with digital signatures. After verifying the signature, we see the SignatureValid message and a green check mark. If the signature is not verified, the validity is unknown. Verifying signatures is important, let’s see how to do it in PDF. How to Verify Signatures in PDF Verifying signatures in PDF format makes it more trustworthy and the document more likely to be accepted. You can verify signatures in PDF documents in the following ways. Open the PDF in Adobe Reader Right-click the signature and select Show Signature Properties Click the Show Signer Certificate button Add the signature to the Trusted Certificates list from the Trust tab Click Verify Signature to complete the verification Let

Detailed method to unblock using WeChat friend-assisted verification Detailed method to unblock using WeChat friend-assisted verification Mar 25, 2024 pm 01:26 PM

1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.

How to use Vue and Element-UI to implement lazy loading of images How to use Vue and Element-UI to implement lazy loading of images Jul 22, 2023 pm 04:05 PM

How to use Vue and Element-UI to implement lazy loading of images Lazy loading (Lazyloading) is a technology that delays loading of images, which can effectively increase page loading speed, save bandwidth and improve user experience. In the Vue project, we can use Element-UI and some plug-ins to implement the image lazy loading function. This article will introduce how to use Vue and Element-UI to implement lazy loading of images, and attach corresponding code examples. 1. Install the necessary dependencies before starting

How to validate IFSC code using regular expressions? How to validate IFSC code using regular expressions? Aug 26, 2023 pm 10:17 PM

Indian Financial System Code is the abbreviation. Indian bank branches participating in the electronic funds transfer system are identified by a special 11-character code. The Reserve Bank of India uses this code in internet transactions to transfer funds between banks. IFSC code is divided into two parts. Banks are identified by the first four characters, while branches are identified by the last six characters. NEFT (National Electronic Funds Transfer), RTGS (Real Time Gross Settlement) and IMPS (Immediate Payment Service) are some of the electronic transactions that require IFSC codes. Method Some common ways to validate IFSC codes using regular expressions are: Check if the length is correct. Check the first four characters. Checkthefifthcharacter.Che

How to use Vue and Element-UI to implement data filtering and search functions How to use Vue and Element-UI to implement data filtering and search functions Jul 21, 2023 pm 08:40 PM

How to use Vue and Element-UI to implement data filtering and search functions. In modern web development, data filtering and search functions are very common and important requirements. Vue and Element-UI are currently very popular front-end frameworks. They provide many powerful tools and components that can help us easily implement data filtering and search functions. This article will introduce how to use Vue and Element-UI to implement these functions, and provide detailed code examples. First, we need to prepare a

How to implement calendar and date selection functions using Vue and Element-UI How to implement calendar and date selection functions using Vue and Element-UI Jul 22, 2023 pm 05:30 PM

Introduction to how to use Vue and Element-UI to implement calendar and date selection functions: In front-end development, calendar and date selection functions are one of the very common requirements. Vue and Element-UI are a pair of very powerful development tools. Combining them can easily implement calendar and date selection functions. This article will introduce how to use Vue and Element-UI to create a simple calendar and date selection function, and provide code examples to help readers understand the specific steps and methods of implementation. Preparation: at the beginning

How to use Vue and Element-UI to group and summarize data How to use Vue and Element-UI to group and summarize data Jul 21, 2023 pm 02:37 PM

How to use Vue and Element-UI to group and summarize data. In front-end development, we often encounter situations where we need to group and summarize data. Vue is a very popular JavaScript framework, and Element-UI is a component library based on Vue. It provides a rich set of UI components that can help us quickly build pages. This article will introduce how to use Vue and Element-UI to group and summarize data, and illustrate it with code examples. Preparatory work

How to create a responsive web interface using Vue and Element-UI How to create a responsive web interface using Vue and Element-UI Jul 20, 2023 pm 11:01 PM

How to create a responsive web interface using Vue and Element-UI In web development, responsive design is an essential technology. Vue.js and Element-UI are two very popular front-end frameworks. They both provide rich tools and components to build modern responsive web interfaces. This article will introduce how to use Vue and Element-UI to create a responsive web interface, and will present the specific implementation process through code examples. First, we need to make sure Vu is installed

See all articles