简要

最近在仿写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()
      })