美文网首页
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