一、绘制对话框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();
}