《elementui重构_elementui重置清空表单》

在使用Element UI框架进行开发时，如果需要对表单进行重置或清空操作，可以通过resetFields()方法来实现。这一方法能够便捷地将表单中的所有字段恢复到初始状态，并移除校验结果。

一、基本思路与简单实现

在模板中定义一个表单，并绑定一个表单对象。

html

  
    
      
    
    
      
        
        
      
    
    
      立即创建
      重置
    
  
</p>


export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      }
    };
  },
  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();
    }
  }
};


<p>

这里通过ref属性给el - form组件起名为ruleForm，然后在methods中定义resetForm方法，当点击重置按钮时调用该方法，传入表单的ref值，从而执行resetFields()方法完成表单重置。

二、针对特殊情况的处理

（一）自定义初始值

有时我们希望表单重置后不是全部为空，而是设置一些特定的初始值。

javascript
resetForm(formName) {
this.$refs[formName].resetFields();
// 设置自定义初始值
this.ruleForm = {
name: '默认活动名称',
region: 'shanghai'
};
}


（二）部分字段重置

如果我们只想重置表单中的某些字段而不是全部字段，可以先保存不需要重置的字段值，然后再重置表单，最后再将这些字段值赋回。

javascript
resetForm(formName) {
let keepValue = this.ruleForm.region; // 假设只保留region字段值
this.$refs[formName].resetFields();
this.ruleForm.region = keepValue;
}


通过以上几种思路，我们可以根据实际需求灵活地对Element UI中的表单进行重置和清空操作。