目录

一、重置myParams

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

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

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

三、复盘-最终方法

---

一、重置myParams

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

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

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

二、this.$refs["name"].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();
      }
    },

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

靓仔、美女请点赞！