Vue element
添加用户组件代码
<template>
<div class="qwe">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
<el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="name">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="name">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="name">
<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:'---------------------------',
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>
<style lang="scss" scoped>
.qwe{
padding:20px;
}
</style>
效果图
