elementUI的表单无法清空
使用了官网的resetFields()方法也清空不了
需要注意几个问题:
-
我们需要为每个form-item加上prop属性,要不然无法清空(大部分的问题就是出在这)
-
resetFields()方法是重置表单,重置为默认值,而不是设置为空值
-
在resetFields()方法之前,如果修改了data里的表单默认值,那么重置以后就是你修改以后的值,而不是data里的值了
-
使用$nextTick再执行赋值
2
- 初始化data数据
vue中:
this.$data 获取当前状态下的data
this.$options.data() 获取该组件初始状态下的data
所以,下面就可以将初始状态的data复制到当前状态的data,实现重置效果:
Object.assign(this.$data, this.$options.data())
当然,如果你只想重置data中的某一个对象或者属性:
this.form = this.$options.data().form
3
- 清空表单爆红
this.$refs.form.clearValidate() // 重置校验表单