vue+element 多表单重置

element 表单重置函数为resetFields()，但因是多表单，所以需要结合Promise一起使用

先定义好form表单，如果需要把表单重置，那么就需要绑定一个prop，且prop名称需要与model绑定的名称一致，否则不生效

<el-form
  ref="submitForm1"
  :model="submitForm1"
  :rules="rules"
  class="form-item"
  label-width="178px"
  label-position="left"
>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="姓名" prop="personName">
        <el-input v-model="submitForm1.personName"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="单位" >
        <el-input v-model="submitForm1.unitName"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
<el-form
  ref="submitForm2"
  :model="submitForm2"
  :rules="rules"
  class="form-item"
  label-width="178px"
  label-position="left"
>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="姓名" prop="personName">
        <el-input v-model="submitForm2.personName"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="单位" >
        <el-input v-model="submitForm2.unitName"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

表单重置代码：

<script>
export default {
  name: "",
  data() {
    submitForm1: {
      //姓名
      personName: "",
      // 单位
      unitName: ""
    },
    submitForm2: {
      //姓名
      personName: "",
      // 单位
      unitName: ""
    },
  },
  methods: {
    // 在需要表单重置的地方，调用此函数即可
    reset(){
      const form1=new Promise((resolve,reject)=>{
        this.$refs['submitForm1'].validate(valid => {
          if(valid) resolve()
        })
      })
    
      const form2=new Promise((resolve,reject)=>{
        this.$refs['submitForm2'].validate(valid => {
          if(valid) resolve()
        })
      })
      Promise.all([form1,form2]).then(()=>{
        console.log('验证通过,提交表单') 
      }).catch(function(reason){
          console.log('出错了',reason)
      });
    }
  }
}
</script>