resetField 实现表单重置

resetField  实现表单的重置

resetField ：对该表单项进行重置，将其值重置为初始值并移除校验结果

代码如下：

---

<template>
  <div id="login_container">
    <el-card class="login_box" id="login_Card">
      <el-form ref="loginFormRef" :model="loginForm" class="login_form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" clearable show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button id="loginreset" type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login_container",
  data() {
    return {
      loginForm:{ 
        username: "",
        password: "",
      },
    };
  },
    methods: {
      resetLoginForm() {
        this.$refs.loginFormRef.resetFields();
      },
    },
};
</script>

---

prop : 表单域 model 字段，在使用 resetFields 方法的情况下，该属性是必填的

ref="loginFormRef"  中 loginFormRef 就为该表单的实例对象

@click：为重置按钮设置一个单击事件