20-Vue实战项目：电商管理系统（Element-UI）-用户列表

## 添加用户-渲染添加用户的对话框

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