【实操】vue+element UI tab页多表单合并校验提交

场景

一个页面中tab栏切换多个form表单组件，只有一个保存按钮。需要把各组件下的表达数据合并校验提交。

思路

1. 父组件通过两次调用$refs获取子组件的dom元素以及组件内部form的dom元素。
2. 通过循环表单项获取validate值获取校验结果，通过Promise.all合并表单。
3. 子组件内部getData方法返回表单数据，父调用子组件的getData方法获取子组件的表单值

代码

父页面：

<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="form1" name="first">
        <form-comp-one ref="formComp1" />
      </el-tab-pane>
      <el-tab-pane label="form2" name="second">
        <form-comp-two ref="formComp2" />
      </el-tab-pane>
    </el-tabs>
    <el-button class="submit-btn" size="small" @click="submit">提交</el-button>
  </div>
</template>
<script>
import FormCompOne from '@/components/FormCompOne.vue';
import FormCompTwo from '@/components/FormCompTwo.vue';
export default {
  components: {
    FormCompOne,
    FormCompTwo
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submit() {
      const _this = this
      const formData1 = _this.$refs.formComp1.$refs.formData
      const formData2 = _this.$refs.formComp2.$refs.formData
       Promise.all([formData1,formData2].map(_this.getFormPromise)).then(res => {
         console.log(res)
           const validateResult = res.every(item => !!item);
           if(validateResult) {
             const params = {
              ..._this.$refs.formComp1.getData(),
              ..._this.$refs.formComp2.getData(),
             }
             console.log(params)
              alert('提交成功')
           } else {
             alert('必填内容未填写')
           }
       })
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        })
      })
    },
  }
};
</script>
<style>
.submit-btn {
  position: absolute;
  right: 10px;
  top: 60px
}
</style>

子组件1

<template>
  <el-form 
  ref="formData"  
  :model="formData"
  :rules="formRules"
  label-width="80px" 
  style="width: 450px;"
  >
    <el-form-item label="名称" prop="name">
      <el-input class="f-input" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-input class="f-input" v-model="formData.region"></el-input>
    </el-form-item>
    <el-form-item label="活动形式" prop="type">
      <el-input class="f-input" v-model="formData.type"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  class formData {
    constructor() {
      this.name='';
      this.region = ''; 
      this.type = ''; 
    }
    static getRule() {
      return {
        name:  [{ required: true, message: '请填写名称', trigger: 'blur' }],
        region: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
        type: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      }
    }
  }
  export default {
    data() {
      return {
        formData: new formData,
        formRules: formData.getRule(),
      };
    },
    methods: {
      getData() {
        // 返回子组件的form
        return this.formData;
      },
    }
  }
</script>
<style scoped>

</style>

子组件2

<template>
  <el-form ref="formData" label-width="80px" :model="formData" :rules="formRules" style="width: 450px;">
    <el-form-item label="地址" prop="address">
      <el-input class="f-input" v-model="formData.address"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input class="f-input" v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-input class="f-input" v-model="formData.sex"></el-input>
    </el-form-item>
</el-form>
</template>
<script>
  class formData {
    constructor() {
      this.address='';
      this.age = ''; 
      this.sex = ''; 
    }
    static getRule() {
      return {
        address:  [{ required: true, message: '请填写名称', trigger: 'blur' }],
        age: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
        sex: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      }
    }
  }
  export default {
    data() {
      return {
        formData: new formData,
        formRules: formData.getRule(),
      };
    },
    methods: {
      getData() {
        // 返回子组件的form
        return this.formData;
      },
    }
  }
</script>
<style scoped>

</style>

源码

github代码地址：https://github.com/qi-Ruofan/formsMerge