<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]) } }