vue2 pros 增加 function

一、绘制对话框UI结构

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

<el-col :span="12">
            <div class="opt_btn_box">
              <el-button class="btn_bar" @click="addUser" size="mini">添加用户</el-button>
            </div>
          </el-col>
<!-- 中间代码省略.... -->
<script>
export default {
  data() {
    return {
      addDialogVisible: false //控制添加用户对话框的显示与隐藏
    };
  },
<!-- 下面代码省略.... -->
</script>

 在分页下面添加就行

<!-- 添加用户的对话框 -->
<div class="dialog-bg" v-if="addDialogVisible"></div>
          <div class="dialog" v-if="addDialogVisible">
            <div class="header-dialog">
              <span>新增用户</span>
              <i class="el-icon-close"  @click="addDialogVisible= false"></i>
            </div>
            <div class="main-dialog">
              <el-form :model="form" ref="addUserFormRef" label-width="120px"  :rules="addFormRules">
                <el-row>
                  <el-col span="6">
                    <el-form-item label="邮箱" placeholder="请输入邮箱" prop="objectUserBp">
                      <el-input v-model="form.objectUserBp" size="mini" />
                    </el-form-item>
                </el-col>
                <el-col span="6">
                  <el-form-item label="所属功能组">
                    <el-select v-model="form.dptName" placeholder="" size="mini" @change="selectChange">
                      <el-option v-for="item in options1" :key="item.Id" :label="item.DptName" :value="item.DptName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
          <el-form-item label="可见权限">
            <el-select v-model="form.roleIds" :multiple="true" placeholder="" size="mini">
              <el-option v-for="item in options2" :key="item.Id" :label="item.RoleName" :value="item.Id"></el-option>
            </el-select>
          </el-form-item>
          </el-form>
          </div>

其中新增用户是对话框左上角的标题，v-if="addDialogVisible"用来控制对话框是否显示，我们为其设置一个addDialogVisible值，默认为false。在底部区有两个按钮，目前暂时设置点击确定和取消的时候都设置对话框不可显示。添加Form表单.

二、渲染添加用户的表单

添加用户表单数据

form: {   
        UserName: "",
        dptName: "",
        roleIds: [],
        objectUserBp: "",
        DptId: "",
        userBp:
          sessionStorage.getItem("UserBp") === "null"
      },

三、实现自定义校验规则

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

我们可以自定义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去定义邮箱和手机的自定义函数：

<script>
export default {
  data() {
    var checkEmail = (rule,value,callback) =>{
        //验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(regEmail.test(value)){
          return callback(); //合法邮箱
        }
        return callback(new Error("请输入合法的邮箱"));
    }
    var checkMobile = (rule,value,callback) =>{
        //验证手机号的正则表达式
        const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if(regMobile.test(value)){
          return callback(); //合法手机号
        }
        return callback(new Error("请输入合法的手机号"));
    }
    return {
      //获取用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: 1, //当前的页数
        pagesize: 2, //每页的数量
      },
      userList : [],
      total: 0,
      addDialogVisible: false, //控制添加用户对话框的显示与隐藏
      //添加用户的表单数据
      form: {
        UserName: "",
        dptName: "",
        roleIds: [],
        objectUserBp: "",
        DptId: "",
        userBp:
          sessionStorage.getItem("UserBp") === "null"

      },
      //添加表单的验证规则对象
      addUserFormRules: {
        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:'blur'},{validator: checkEmail,trigger:'blur'}],
        mobile: [{required:true,message:'请输入手机号',trigger:'blur'},{validator: checkMobile,trigger:'blur'}]
      } 
    };
  },
<!-- 下面代码省略.... -->
</script>

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

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

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

<!-- 添加用户的对话框 -->
    <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">

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

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

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