## 添加用户-渲染添加用户的对话框
1.按需导入对话框组件,在element.js中
// 全局导入
import {
Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog } from 'element-ui'
// 局部注册
Vue.use(Dialog)
2.Dialog对话框结构
// title标题,visible控制对话框的显示与隐藏
<el-dialog title="提示" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
// 内容主体区
<span>这是一段信息</span>
// 底部按钮区
<span slot="footer" class="dialog-footer">
// 按钮绑定click事件,用来控制对话框显示与隐藏
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
添加用户-渲染添加用户的表单
1.Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
// 通过model双向数据绑定到addForm
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{
required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
email: [
{
required: true, message: '请输入邮箱', trigger