添加ele抽屉插件
<el-drawer
title="添加用户"
:visible.sync="drawer"
:direction="direction"
:wrapperClosable='false' 表示点击其他区域不关闭
>
<!-- 插入AddUser组件 -->
<AddUser @addok='addok'></AddUser>
</el-drawer>
methods: {
/* 当子组件添加数据成功的时候触发方法 */
addok(){
/* 刷新页面数据 */
this.getTableDate();
/* 关闭抽屉 */
this.drawer=false
},}
插入AddUser组件
<template>
<div class="add-users">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名称" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="ruleForm.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即添加</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
ruleForm: {
username: "",
password: "",
email: "",
mobile: "",
},
rules: {
username: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
{
min: 3,
max: 12,
message: "长度在 3 到 12 个字符",
trigger: "blur",
},
],
password: [
{ required: true, message: "请输入用户密码", trigger: "blur" },
{
min: 3,
max: 12,
message: "长度在 3 到 12 个字符",
trigger: "blur",
},
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios({
method: "post",
url: "https://*****.top.****/api/private/v1/users",
data: {
username: this.ruleForm.username,
password: this.ruleForm.password,
email: this.ruleForm.email,
mobile: this.ruleForm.mobile,
},
headers:{
Authorization: localStorage.token
}
})
.then(res=>{
let {meta}=res.data;
if(meta.status==201){
this.$message.success(meta.msg)
this.$emit('addok')
}else{
this.$message.error(meta.msg)
}
})
} else {
this.$message.error("添加失败");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
