ElementUI`resetFields()`方法避坑

resetFields() 方法是 ElementUI 表单组件中的一个方法，用于重置表单项到初始值。如果你遇到使用 resetFields() 方法时出现问题，可能是以下原因：

1. 表单项没有正确绑定模型（model）。
2. 表单项绑定的模型（model）初始值不正确。
3. 表单项绑定的模型（model）发生了变化，但是重置时没有更新。

解决方法：

1. 确保每个表单项都绑定了模型属性。
2. 检查模型（model）的初始值是否设置正确。
3. 如果模型（model）的值在表单创建后发生了变化，需要在调用 resetFields() 之前更新模型（model）的初始值，或者在调用 resetFields() 之后重新设置模型（model）的值为初始值。

示例代码：

// 假设有一个表单组件和对应的模型（model）
<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '', // 初始值为空字符串
        // 其他字段...
      },
      initialForm: { ...this.form } // 存储初始表单状态
    };
  },
  methods: {
    resetForm() {
      // 重置表单时，先还原模型（model）到初始状态
      this.form = { ...this.initialForm };
      // 然后调用 resetFields 方法
      this.$refs.form.resetFields();
    }
  }
};
</script>

在这个示例中，我们在组件的 data 函数中定义了 form 对象，并创建了一个 initialForm 对象来存储 form 的初始状态。在 resetForm 方法中，我们首先将 form 对象重置为 initialForm 的副本，然后调用 resetFields() 方法来重置表单。这样可以确保表单项能够被正确重置。