vue表单数据加载/重置

实际项目中，我们的一些表单经常有默认值，在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()

整体代码如下：

<template >
<el-form label-width="80px" :model="formData" ref="editForm">
  <el-form-item label="名称">
    <el-input v-model="formData.name">el-input>
  el-form-item>
  <el-form-item label="活动区域">
    <el-input v-model="formData.region">el-input>
  el-form-item>
  <el-form-item label="活动形式">
    <el-select v-model="formData.type">
      <el-option label="线下" value="1">el-option>
      <el-option label="线上" value="2">el-option>
    el-select>
  el-form-item>
el-form>
template >

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        region: '',
        type: '1'
      }
    };
  },
  methods: {
    loadFormData: function(data){
      if (this.$refs['editForm']) {
        // 重置表单验证
        this.$refs.editForm.resetFields()
      }
      if (!data) {
        this.formData = this.$options.data().formData
      } else {
        this.formData = Object.assign({}, row)
      }
    }
  }
}
script>