目录

简要总结

详细内容

重置myParams

this.$refs["name"].resetFields()

复盘-最终方法

精简版代码

扩展版

往期优质相关推荐

---

简要总结

序号	方法	作用
1	直接重置myParams	重置表单数据模型，但不会重置表单校验状态。
2	this.$refs["name"].resetFields()	在DOM元素挂载后调用，用于重置表单校验状态。
2.1	使用v-if控制渲染	无法解决初次渲染时$refs未定义的问题。
2.2	使用$nextTick	确保DOM更新后再调用resetFields，但可能导致数据显示延迟。
3	openDialog和reset组合使用	避免首次打

1. 重置myParams:

   • 方法: 直接设置this.myParams = {}。
   • 作用: 重置表单数据模型，但不清除校验状态，导致再次打开时校验后的红框去除不掉。

2. 使用this.$refs["name"].resetFields():

   • 方法: 在openDialog方法中调用this.$refs['myForm'].resetFields()。
   • 作用: 重置表单校验状态。如果在DOM未渲染时调用，会报错TypeError: this.$refs[formName] is undefined。
   • 问题:
     • 2.1: 使用v-if控制渲染，但无法解决初次渲染时$refs未定义的问题。
     • 2.2: 使用this.$nextTick(() => { this.$refs['form'].resetFields(); });，可以解决$refs未定义的问题，但可能导致数据显示延迟。

3. 复盘-最终方法:

   • 方法: 在openDialog方法中结合使用this.reset和this.isFirst。
   • 作用: 在非首次打开对话框时使用this.$refs['myForm'].resetFields()来重置表单状态。通过isFirstOpen变量跟踪对话框是否是第一次打开，避免初次渲染时的错误。

详细内容

重置myParams

当直接设置myParams = {}，只是重置了表单的数据模型，但没有重置Element UI表单的校验状态。要清除校验状态，需要调用Element UI表单的resetFields方法。

<el-form
        :model="myParams"
        :rules="rules"
        :inline="true"
        class="is-required"
        ref="myForm"
        label-width="80px"
      >
</el-form>

openDialog(){
    this.myDialog = true;
    this.myParams = {};
},

缺点是再次打开时,  校验后的红框去除不掉

this.$refs["name"].resetFields()

这个错误通常发生在尝试访问$refs但相关的DOM元素还未挂载到页面上时。确保在DOM元素可用后再调用resetFields方法。

使用后初次渲染就会报错:  “TypeError: this.$refs[formName] is undefined“

1、使用v-if 然后渲染,  无效

2、使用nextTick,  数据显示慢一拍, 重新打开dialog才会显示上次输入的内容

this.$nextTick(() => {
    this.$refs['form'].resetFields();
});

复盘-最终方法

数据清空报错,  发现只有第一次渲染才会报错,  后面就正常了,
灵机一动...
第一次打开dialog就不重置了,  这样第一次dom也构建完毕了,

不会存在获取不到的情况, 

第二次的时候在使用this.$refs['myForm'].resetFields();  就OK了

精简版代码

    openDialog() {
      this.myDialog = true;
      this.myParams = {};
      this.reset();
      this.isFirst = true;
    },

    /**
     * 重置
     */
    reset() {
      if (this.isFirst) {
        this.$refs["myForm"].resetFields();
      }
    },

扩展版

export default {
  data() {
    return {
      myDialog: false,
      myParams: {},
      isFirstOpen: true, // 标记是否是第一次打开对话框
      // 其他数据定义...
    };
  },
  methods: {
    openDialog() {
      this.myDialog = true;
      // 如果不是第一次打开对话框，则重置表单
      if (!this.isFirstOpen) {
        this.resetForm();
      }
      // 更新标记
      this.isFirstOpen = false;
    },

    /**
     * 重置表单数据和校验状态
     */
    resetForm() {
      // 清空数据模型
      this.myParams = {};
      // 使用$nextTick确保DOM更新后调用resetFields
      this.$nextTick(() => {
        // 检查ref是否存在，然后重置表单
        if (this.$refs.myForm) {
          this.$refs.myForm.resetFields();
        }
      });
    },

    // 其他方法...
  },
  // 其他选项...
};

• isFirstOpen 变量用来跟踪对话框是否是第一次打开。
• openDialog 方法在第一次打开对话框时不会尝试重置表单。
• resetForm 方法会清空数据模型并在$nextTick内重置表单校验状态。

这样，你就可以避免初次渲染时的错误，并且在对话框每次打开后都能正确重置表单状态。

往期优质相关推荐

VSCode 最全实用插件（VIP典藏版）

Vue超详细整理（VIP典藏版）

Vue中created，mounted，updated详解

一文快速上手Echarts（持续更新）

Vue中el-table数据项扩展各种类型总结（持续更新）

疑问、交流、鼓励请留言！

靓仔、美女请点赞！