【转载】vue项目中element-ui实现点击重置按钮，重置表单数据

AllTimeLow丶

已于 2023-06-20 16:43:06 修改

阅读量752

点赞数

文章标签： vue.js ui 前端

于 2023-06-20 16:42:05 首次发布

原文链接：https://blog.51cto.com/u_15670038/5352092#:~:text=1.%E5%9C%A8%E8%A1%A8%E5%8D%95%E4%B8%AD%E5%BC%95%E5%85%A5ref%3D%22loginFormRef%22%E5%B1%9E%E6%80%A7%EF%BC%8CloginFormRef%E5%80%BC%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%AE%9A%E4%B9%89%EF%BC%9B%202.%E7%BB%99%E9%87%8D

版权

文章描述了如何在Vue.js应用中实现点击重置按钮来清空登录表单的详细步骤。这包括在模板中添加ref属性，绑定点击事件到重置按钮，并在方法中调用$refs.loginFormRef.resetFields()来执行重置操作。

摘要由CSDN通过智能技术生成

需求：点击重置按钮，重置登陆表单

 1.在表单中引入ref="loginFormRef"属性，loginFormRef值可以自定义；
 2.给重置按钮绑定点击事件：@click="resetLoginForm"；
 3.实现点击事件触发的方法，得到引入的属性值对象，调用resetFields方法，即：this.$refs.loginFormRef.resetFields()

代码如下：

<template>
  <div class="login-container">
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <img src="../assets/logo.png">
      </div>
      <!--登陆表单区域-->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
      <!--用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary">登陆</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: 'li',
        password: 'zz'
      },
      // 1.在需要校验的表单上绑定校验规则：:rules="loginFormRules"；
      // 2.在data中定义loginFormRules规则对象：loginFormRules：{username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
      // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: []}；
      // 3.在需要校验的具体表单上引入prop="username"属性。
      loginFormRules: {
        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' }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登陆表单
    // 1.在表单中引入ref="loginFormRef"属性，loginFormRef值可以自定义；
    // 2.给重置按钮绑定点击事件：@click="resetLoginForm"；
    // 3.实现点击事件触发的方法，得到引入的属性值对象，调用resetFields方法，即：this.$refs.loginFormRef.resetFields()
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>