Element ui installation configuration and some simple use

Element ui installation and some simple use

Installation and configuration

First install element ui in the scaffolding project, the command is as follows:

The code in the official website of element ui is used in the scaffolding project as shown below:

Before the main.js file is configured with information about element ui, such an error will be reported in the browser when starting the scaffolding project.

The reason for the above error is because the relevant information in the element ui is not introduced in the main.js file as shown in the figure:

You can go to the official website of element ui to see the instructions for use of element ui. As long as you can do the above two steps, first install element ui and then introduce element ui information into main.js, then we can use element ui, the above error Will disappear naturally.

Use of icons in element ui

Form verification in element ui official website

If the verification fails, the following picture will appear:

The meaning of several attributes of the form source code:

The following are the data in data and the validation rules for these data:

Form reset

It means to restore the content of each input box in the form to the original content. You can first get the corresponding form through this.$refs[formName], and then call the resetFields() method of this form. The source code of the form is as follows:

The code of the reset method in the methods method is as follows:

Get the verification result when the form is submitted

Container layout container in element ui

The common layout is as follows:

The following figure is the code of various layouts:

The use of navigation menu in element ui

First look at the effect of the custom menu navigation bar in the sidebar menu navigation bar, as shown below:

Next, let's take a look at what the code of the menu navigation bar corresponding to this effect looks like, and several important label elements, as shown below:

Click different menu options in the navigation menu to display different content in the component. The implementation process is as follows:

This process requires nested routing as shown in the figure below:

Use of dialog boxes in element ui

The source code of the dialog box defined in element ui is as follows:

The effect diagram of the dialog box in element ui:

The dialog box and verification form are nested as shown below:

The source code is as follows:

In form validation, the data of the form is placed in an object, and the rules of form validation are also placed in an object. The two data are stored in the data data as shown below: