简要
最近在仿写vue后台管理系统，写到了数据的添加，所以记录一下
首先看一下页面：
效果实现
点击添加用户按钮能够弹出输入框，然后输入信息，完成向数据库添加数据并展现到页面上，下面来说一下具体的实现过程：
首先，这里我是利用后台接口api完成数据的提交和展示，通过api对数据进行增查删改，大家根据自己需求作出调整，api部分不做叙述
第一步：渲染添加用户的对话框
1.利用element-ui组件绘制对话框，这里用到了element中Table，Table-column,Button组件，组件详情点我查看官方文档。
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" @close="addDialogClosed" width="30%">
<!-- 内容主体区 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>2.给按钮绑定点击事件，通过el-dialog组件中:visible.sync的属性实现对话框的出现和小时，这里直接在data中添加 addDialogVisible: false,通过点击添加用户按钮使其值为true显示对话框
addDialogVisible: false, // 控制添加用户对话框的显示与隐藏3.给表单添加校验规则，给el-form组件绑定 :rules="addFormRules"，然后在data中添加表单验证规则，邮箱和手机号需要使用自定义校验规则，详情可以参考另一篇文章 如何自定义校验规则
// 添加表单的验证规则对象
addFormRules: {
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' }
]
},第二步：调用api接口完成用户数据的添加
1.为表单确定按钮添加点击函数 addUser，在methods中写函数的方法，我里是向接口发送post请求完成数据的添加。
addUser () {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败')
}
this.$message.success('添加用户成功！')
// 隐藏添加用户的对话框
this.addDialogVisible = false
// 重新获取用户列表数据
this.getUserList()
})
