# Element UI 重置按钮踩坑

Element UI 重置按钮踩坑

---

1. 官方解释如下

<el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
      };
    },
    methods: {
     //重置按钮
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

• this.$refs[forName] 表格必须要有ref ,并且resetForm(‘ruleForm’)中的参数必须为model名

正确的踩坑方式如下：

methods: {
     //重置按钮
      resetForm(formName) {
      this[formName] = {};

        this.$refs[formName].resetFields();
      }
    }