ElementUI Form resetFields

news/2025/6/4 10:57:31

前言

在一次结合v-if/v-else与resetFields结合使用reset之后值不正常，看完源码提了issue，然后被告知答案原来就在vue文档里，打脸打脸，因此记录一次不看文档，并且出问题不第一时间找文档的教训。

结论

凡事先从文档下手，用element-ui不是光看element-ui的文档，还要看vue文档
Form组件resetFields跟data值没什么关系，只跟Form-Item创建时的初始值有关。
使用v-if/v-else时，要先确定组件是需要重新生成（用 key 管理可复用的元素），还是可以直接替换（新组件会使用旧组件的初始值，事实上这里新旧是同一个组件更改了属性）。
只有含有prop属性，并且当前存在的组件才会reset。
如果Form组件不是一开始就创建，可以用nextTick等待Form/Form-Item第一次创建完再resetFields。（这个其实跟组件没多大关系）

事故现场

https://jsfiddle.net/s5ar1un3...

上面代码切换组件后，执行resetFields重置值，结果重置的值为别的组件绑定的初始值。

事故原因

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

也就是说使用v-if/v-else时，虽然看似是多个组件切换，但实际上是1个组件切换了自身的属性。但问题的关键是，切换了vue的属性，element-ui添加的属性比如初始值并没有换。

解决

https://jsfiddle.net/s5ar1un3...

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

在事故现场上加上key值绑定。用 key 管理可复用的元素

resetFields过程

form.vue

created() {this.$on('el.form.addField', (field) => {if (field) {this.fields.push(field);}}this.$on('el.form.removeField', (field) => {if (field.prop) {this.fields.splice(this.fields.indexOf(field), 1);}});
}resetFields() {...this.fields.forEach(field => {field.resetField();});},

form-item.vue

    mounted() {if (this.prop) {this.dispatch('ElForm', 'el.form.addField', [this]);...let initialValue = this.fieldValue;...Object.defineProperty(this, 'initialValue', {value: initialValue});...}}beforeDestroy() {this.dispatch('ElForm', 'el.form.removeField', [this]);}resetField() {...this.validateDisabled = true;if (Array.isArray(value)) {prop.o[prop.k] = [].concat(this.initialValue);} else {prop.o[prop.k] = this.initialValue;}}

Form在created阶段创建监听，保存下当前Form-Item。
Form-Item在mounted判断是否存在prop属性，如果有，设置好初始值。
Form组件resetFields实际上是保存当前注册上来的子组件Form-Item的resetField方法。
Form-Item的resetField方法重新赋值为this.initialValue。（之前事故原因就是组件属性更新initialValue值是不会变的）