复制代码
<el-form :model="loginForm" ref="loginFormRef"> // 1. 需要给表单指定 ref 属性 , 可以理解为表单的 名字<!-- 用户名 --><el-form-item prop="username"> // 2. 需要给 需要重置 的表单项指定 prop 属性, 值为 表单 loginForm 中的 username<el-inputv-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])}}
