element-ui的dialog弹框写添加用户功能

//添加用户功能
<el-button @click="dialogvisible = true"> 添加用户 </el-button>
//dialog对话框
<el-dialog title="添加用户" :visible.sync="dialogVisible"  width="50%">
//el-form表单
  <el-form :model="UserForm" :rules="UserRules" ref="UserRef" label-width="80px">
  	<el-form-item label="用户名" prop="username">
    	<el-input v-model="UserForm.username"></el-input>
  	</el-form-item>
  </el-form>
  
  <span slot="footer" class="dialog-footer">
    <el-button @click="closedUserForm">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false" @click="addUserForm">确 定</el-button>
  </span>
</el-dialog>
data(){
	return{
		UserForm:[
			{username:''}
		],
		UserRules: {
          username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          	],
          }
	}
}
methods:{
	//取消
	closedUserForm(){
		this.dialogvisible = false	//关闭dialog对话框
		this.$refs.UserRef.resetFields();	//重置表单
	},
	//确定
	addUserForm(){
	this.$refs.UserRef.validate(async (valid)=>{
		if(!valid) return
		const {data:res} = await this.$http.post("roles", this.UserForm)
		if(res.meta.status!==201) return this.$message.error('添加失败')
		this.$message.success('添加成功')
		this.dialogvisible = false	//关闭dialog对话框
		this.getUserList() //重新加载列表
	})
	}
}