Vue项目表单项很多 没有绑定prop 表单重置

作者：@ywjbalabala
本文为作者原创，转载请注明出处：https://www.cnblogs.com/ywjbalabala/p/17210169.html

---

element-UI的表单组件在使用时需要绑定prop属性才能使用自带的resetField重置表单，如果遇到表单项很多，而且大部分不需要校验，为了重置去一个一个设置prop的话很麻烦。

所以可以使用Object.assign来解决表单重置问题。

我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态，达到重置表单的目的。

相关代码如下：

 
export default {
  data() {
    return {
      systemInfoArr: [],
      unitListArr: [],
      formSelectObj: {
        systemInfo: { // 业务系统列表
          name: 'systemInfo',
          arr: [],
          selectVal: '',
          value: '',
          curSelect: null
        },
        unitList: { // 用户配置系统
          name: 'unitList',
          arr: [],
          selectVal: '',
          value: '',
          curSelect: null
        }
      }
 
    }
  },
  methods: {
　　　　resetForm(){
        　　Object.assign(this.$data.formSelectObj, this.$options.data().formSelectObj) // 这里重置 formSelectObj 数据，其他不受影响
        　　Object.assign(this.$data, this.$options.data()) // 这里重置 data 下的所有数据
      　　}
　}