新增用户

①. 按需引入对话框Dialog标签组件
Dialog是我们点击完添加用户弹出的那个页面
②.给添加按钮绑定事件

 <el-button type="primary" 
  @click="addDialogVisible = true">添加用户</el-button>

③. 添加用户弹出的对话框

<!-- 添加用户对话框 -->
<!--关闭时触发的事件-->
      <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
      >
        <!-- 添加弹出里内容主题区域 -->
        <!-- addForm 里面有username、password、email、mobile四个变量用来存放我们添加时输入的数据  -->
        <!-- addFormRules 对表单属性的验证 -->
        <!--可以获得组件的实例对象-->
        <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>

④.在data中定义用到的变量

  // 控制添加用户对话框的显示和隐藏
      addDialogVisible: false,

 // 添加用户的表单数据
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },

 // 添加表单的验证规则对象
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            mini: 3,
            max: 10,
            message: "用户名在3个和10个之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            mini: 6,
            max: 15,
            message: "密码在3个和10个之间",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机", trigger: "blur" },
          { checkEmail, trigger: "blur" },
        ],
      },

④.点击确定触发adduser事件，向后端提交数据，并接收验证
成功后隐藏弹出并重新获取数据

 // 点击按钮添加新用户
    adduser() {
      this.$refs.addFormRef.validate(async (valid) => {
        // console.log(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();
      });
    },

添加用户表单的重置功能

在我们使用添加功能后输入验证信息不正确，并没提交，下次这个验证信息还会存在；我们需要把这个验证信息在下次打开添加弹窗时重置

①. 为弹窗添加一个关闭事件

 @close="addDialogClosed"

②. 在这个事件里下次打开添加用户重置表单的效验

// 监听添加用户对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },