前端工作小结60-表单重置

复制代码
<el-form :model="loginForm" ref="loginFormRef">      // 1. 需要给表单指定  ref 属性 , 可以理解为表单的 名字
        <!-- 用户名 -->
        <el-form-item prop="username">   // 2. 需要给 需要重置 的表单项指定 prop 属性, 值为 表单 loginForm 中的 username
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">    // 2. 同上
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button size="medium" type="primary">登录</el-button>
          <el-button size="medium" @click="reset" type="info">重置</el-button>   // 3. 给重置的按钮绑定 click事件
        </el-form-item>
      </el-form>

data: function() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  }

  methods: {
    // 表单的重置功能
    reset() {
      console.log('123')
      this.$refs.loginFormRef.resetFields()     // 4. 通过this.$refs.(上面提到的表单名字) 调用API resetFields(), 即可实现表单的重置
      //   console.log(this.$refs[formName])
    }
  }