element-ui中this.$refs['form'].resetFields()方法重置表单无效的原因

分类:计算机 | 前端 | ElementUI | 综合 412
更新:2021-12-02 00:51:46
编辑

1 el-form-item中缺少了prop属性

如下代码,el-form-item缺少了prop属性,那么这个表单项就不能被重置为初始值了。

<el-form-item label="开始时间">
    <el-date-picker v-model="addForm.startTime" type="date"
            start-placeholder="选择时间" value-format="yyyy-MM-dd">
    </el-date-picker>
</el-form-item>

2 在还没有显示对话框之前就调用this.$refs['form'].resetFields()方法

如下代码:

this.addDialogFormVisible = true;

//重置新增页面数据
this.$refs['addForm'].resetFields();
this.$refs['FormTheQuery'].resetFields();

this.initNewTableData();

这样会报错的,因为在页面刚打开的时候this.$refs['addForm']和this.$refs['FormTheQuery']还是空对象,调用resetFields()方法会报错的,应该事先判断一下是否为空,然后再调用resetFields()方法,代码如下:

this.addDialogFormVisible = true;

//重置新增页面数据
if(this.$refs['addForm'])
  this.$refs['addForm'].resetFields();
if(this.$refs['FormTheQuery'])
    this.$refs['FormTheQuery'].resetFields();

this.initNewTableData();