接上篇《26、实现用户信息搜索功能》

上一篇我们实现了用户的搜索功能，本篇我们来实现新增用户的功能。

一、绘制对话框UI结构

我们首先要实现点击“添加用户”按钮，弹出一个添加用户的对话框：

对话框功能，我们使用Eelement-UI的“Dialog”对话框组件：

首先在plugins/element.js中按需导入“Dialog”组件：

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, 
    Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup,
    Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,
    Tooltip,Pagination,Dialog } from 'element-ui'
Vue.use(Button);Vue.use(Form);Vue.use(FormItem);Vue.use(Input);
Vue.use(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);
Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);
Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Card);Vue.use(Row);
Vue.use(Col);Vue.use(Table);Vue.use(TableColumn);Vue.use(Switch);Vue.use(Tooltip);
Vue.use(Pagination);Vue.use(Dialog);
Vue.prototype.$message = Message

然后绘制对话框最基本的UI结构（把el-dialog标签放在分页组件的下面就行）：

  
  这是一段信息
  
  
    取 消
    确 定
  

其中“title”是对话框左上角的标题，“visible.sync”用来控制对话框是否显示（boolean值），我们为其设置一个addDialogVisible值，默认为false。在底部区有两个按钮，目前暂时设置点击确定和取消的时候都设置对话框不可显示。

然后为添加按钮设置一个点击事件：

  添加用户

效果：

二、渲染添加用户的表单

上面我们实现了一个对话框，下面我们来实现在对话框中渲染新增用户信息的表单，效果如下：

上述四项就是一个用户要新增入库的信息，每一项有必填校验。

我们修改Dialog的标题，然后在主体区域删除原来的span，添加Form表单（带验证）：

  
  
     
      
    
    
      
    
    
      
    
    
      
    
  
  
  
    取 消
    确 定
  

其中model是该表单绑定的数据对象，rules是该表单的校验规则，ref是给el-form组件起的名称。

然后在数据区，指定上面的“addUserForm”对象，“addUserFormRules”校验对象：

上面的校验规则中，required设置该属性是否必填，message设置不符合校验规则时触发的提示信息，trigger设置的是触发校验的时机（其中blur是失去焦点时）。

我们看一下表单样式和触发校验的效果：

三、实现自定义校验规则

上面我们的“邮箱”和“手机”只是做了必填校验，并没有做格式校验，需要校验用户填写的是不是一个正确的邮箱地址和手机号码。

我们可以自定义el-form的表单验证自定义规则：

样例代码：

var checkAge = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('年龄不能为空'));
    }
    setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        if (value < 18) {
          callback(new Error('必须年满18岁'));
        } else {
          callback();
        }
      }
    }, 1000);
};

我们可以看到，样例代码中设置了一个自定义属性（checkAge），用一个箭头函数指向一个方法，该方法就是自定义校验方法。

在箭头函数的形参中，包含有“rule”、“value”、“callback”三个参数，其中“rule”是验证规则，“value”是要验证的值，“callback”是回调函数（如果验证通过就直接调用callback，否则抛出异常，提供一个包含提示信息的Error对象）。

定义的自定义属性（checkAge），是在原来的rules中声明一个“validator”属性，值为该自定义属性的值，例如：

age: [{ validator: checkAge, trigger: 'blur' }]

下面我们按照官方demo去定义邮箱和手机的自定义函数：

效果：

四、添加用户表单的重置功能

我们再来编写一下添加用户表单的重置功能，即关闭添加对话框再打开后，会将之前填写好的所有用户信息清空（即初始状态）。

我们需要监听对话框的关闭动作，在关闭时将表单清空；我们首先为对话框标签添加一个colse事件（当Dialog关闭时会触发该方法）：

然后在下面方法区指定该函数：

//监听添加用户对话框的关闭状态
addDialogClosed(){
  this.$refs.addUserFormRef.resetFields();
}

效果：