vue表单数据加载/重置

最新推荐文章于 2024-08-12 10:06:58 发布

yycdaizi

最新推荐文章于 2024-08-12 10:06:58 发布

阅读量6.8k

点赞数 1

分类专栏： javascript 文章标签： vue elementui

本文链接：https://blog.csdn.net/yycdaizi/article/details/102629877

版权

在Vue项目中，通常会在data中设置表单的默认值。当表单被使用后，需要恢复到初始状态，避免繁琐的手动赋值，可以通过复制data到原始数据实现。然而，当结合ElementUI的表单验证时，单纯的数据重置无法清除验证提示，需要调用resetFields方法来完成表单的完全重置。

摘要由CSDN通过智能技术生成

实际项目中，我们的一些表单经常有默认值，在Vue中，我们可以直接在data中设置默认值。

export default data() {
   
  return {
   
    formData: {
   
      name: '',
      region: '',
      type: '1' //默认值
    }
  };
}

但是，在表单被使用过（新增或者编辑过其他行）后，如何将其恢复到原始状态呢？
有的做法可能是这样：

this.formData={
   }

但是这样只能清空所有值，默认值并不能恢复。难道一个个的重新手动赋值吗？当然可以，就是比较麻烦。好在vue帮我们保存了一份原始数据，直接把data复制为原始数据即可

this.formData=this.$options.data().formData

但是在用element表单验证时，这种方法存在一个问题，就是表单的验证提示没有重置，调用表单的resetFields方法即可。

this.$refs.editForm.resetFields(

关注

专栏目录