目录
- 弹框
- 关闭添加用户对话框，重置表单
- 表单的验证规则
- 添加的方法
弹框
页面有一个按钮，一点击，弹出框，并且在这个里面添加数据
以上的代码就是官网 的弹框
有一个属性
默认弹框是false
代码语言：javascript复制 <!-- 添加用户dialog对话框 -->
<el-dialog align="left" title="添加用户" :visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog" >
<!--主体部分 -->
<el-form :model="addUserForm" status-icon :rules="addUserFormRul" ref="addUserFormRel" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="addUserForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="addUserForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addUserForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model.number="addUserForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addUserVisible = false">取 消</el-button>
<el-button type="primary" @click="addUserList">确 定</el-button>
</span>
</el-dialog>以上代码中 :visible.sync=“addUserVisible” 是动态绑定了是否显示
他的值是true 或者 false
我们只要点击了按钮，改变这个变量的值，那么弹框就会显示或者隐藏了
其实弹框就是下面这个标签，只需要让他隐藏或者显示就可以了 :visible.sync 这个属性就可以控制这个弹框显示还是关闭
里面想要显示什么东西，就显示什么东西
代码语言：javascript复制 <el-dialog align="left" title="添加用户"
:visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog" >
</el-dialog>
这个要和表单里面的一样
之后的就是一些事件了
关闭添加用户对话框，重置表单
弹框上面有一个关闭的事件，点击的时候我们要求他走一个方法，里面就是对当前表单的重置
表单的验证规则
以上是给这个表单绑定了一个规则
我们开始写对应的规则
//添加用户规则
addUserFormRul: {
username: [{
required: true,
message: '请输入用户名',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 6,
message: '长度为6个字符',
trigger: 'blur'
}
],
phone: [ { validator: checkMobile, trigger: 'blur' }],
},添加的方法
代码语言：javascript复制 //点击确定发送添加新用户接口
addUserList(){
this.$refs.addUserFormRel.validate(valid=>{
//校验规则全部正确向后台发送请求
if(!valid) return;
this.$http.post('users',this.addUserForm).then(res=>{
//console.log(res);
if(res.data.meta.status!==201) return this.$message.error('添加用户失败！');
this.$message.success('添加用户成功！');
//刷新列表
this.getUserList();
弹框关闭
this.addUserVisible = !this.addUserVisible;
})
})
// this.$refs.addUserFormRel.validateField(function(['username','passworld'],err=>{
// console
// })
},
