美文网首页
vue element-ui重置表单

vue element-ui重置表单

作者: 夏夏夏夏顿天 | 来源:发表于2018-12-13 16:12 被阅读107次

在重置表单的时候,form-item有prop属性么,需要这个属性

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
 <el-form-item
   label="年龄"
   prop="age"
   :rules="[
     { required: true, message: '年龄不能为空'},
     { type: 'number', message: '年龄必须为数字值'}
   ]"
 >
   <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
   <el-button @click="resetForm('numberValidateForm')">重置</el-button>
 </el-form-item>
</el-form>
<script>
 export default {
   data() {
     return {
       numberValidateForm: {
         age: ''
       }
     };
   },
   methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           alert('submit!');
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
     }
   }
 }
</script>

相关文章

网友评论

      本文标题:vue element-ui重置表单

      本文链接:https://www.haomeiwen.com/subject/ekdbhqtx.html