vue简单的表单操作

最新推荐文章于 2024-06-25 15:53:03 发布

weixin_44470436

最新推荐文章于 2024-06-25 15:53:03 发布

阅读量413

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44470436/article/details/106853828

版权

VUE的表单操作

<el-form :model="addForm" :rules="rules" 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>
<el-button type="primary" @click="addUser">确 定</el-button>

vue表单验证通过prop属性对应input中的v-modle`

addUser() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return valid
        const { data: result } = await this.$http.post('users', this.addForm)
        if (result.meta.status !== 201) this.$message.error('添加用户失败！')
        this.$message.success('添加成功')
        this.addDialogVisible = false
        // 刷新用户列表
        this.getUserList()
      })
    }
    // 重置表单的数据
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    }
    ```
    **通过validate方法对表单进行预校验，返回的参数valid是一个boolean值，通过$refs的属性方法resetFields()重置表单数据**