1. First, click the Add User button to pop up the Add User dialog box. This dialog will use the Dialog dialog component in element. So let's take a look at how to use the Dialog dialog box.
2. In the element.js file, import the Dialog component as needed. import { Dialog } from 'element-ui' and then do a global registration Vue.use(Dialog)
3. Paste the basic UI structure of the Dialog dialog box in elementUI into the project.
The :visible.sync="dialogVisible" property binding is used to control the showing and hiding of the dialog, and we need to bind it to a boolean.
:before-close="handleClose" This is an event called before-close, which will be triggered before the dialog box is closed, but we don't need it now, so we will delete it temporarily
The first span is the content body area
The second span is the bottom button OK and cancel area
4. We can define this boolean value called addDialogVisible. Now this boolean value is not defined, find the data(){} in the script behavior area of the component where it is located, and define addDialogVisible: false, the default is false, which means to hide the dialog
width="50%" The width of the control dialog is 50% of the screen, generally 50% of the width
5. When the cancel button is clicked to bind a click event, <el-button @click="addDialogVisible = false">Cancel</el-button> As long as the click event is triggered, we will trigger the event addDialogVisible: false to hide the dialog box,
Similarly, clicking OK has the same effect. Hide the dialog box <el-button @click="addDialogVisible = false">OK</el-button>
6. When you click the button to add a user, you only need to bind a click event to the added user, so that addDialogVisible is reset to true
That is, the dialog box is not hidden.
7. The v-model instruction in the input is bound to the data item of a form, the username of addForm
The same is true for the password email and mobile phone
required:true Required options
trigger: 'blur' loses focus trigger timing
Next, pick up another article on my homepage