element-ui实现多表单绑定单个值并进行提交与重置操作（label-position不一）

效果图：

1.此设计是针对表单每栏的标题位置不同时的简单解决方案；

2.同时该设计也对校验及重置操作进行详解；

template：

<el-form
      ref="ruleForm1"
      label-position="left"
      label-width="80px"
      :rules="rules"
      :model="formLabelAlign"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
</el-form>
<el-form
      ref="ruleForm2"
      label-position="top"
      label-width="80px"
      :rules="rules"
      :model="formLabelAlign"
    >
      <el-form-item label="活动区域" prop="region">
        <el-input v-model="formLabelAlign.region"></el-input>
      </el-form-item>
      <el-form-item label="活动形式" prop="type">
        <el-input v-model="formLabelAlign.type"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
</el-form>

data:

formLabelAlign: {
        name: "",
        region: "",
        type: "",
},
rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        region: [{ required: true, message: "请输入", trigger: "blur" }],
        type: [{ required: true, message: "请选择", trigger: "change" }],
},

methods:

    submitForm() {
      Promise.all([
        this.$refs["ruleForm1"].validate(),
        this.$refs["ruleForm2"].validate(),
      ])
        .then(() => {
          // 正常操作
          alert("submit!");
        })
        .catch(() => {
          // 错误操作
          console.log("error submit!!");
          return false;
        });
    },
    resetForm() {
      this.$refs['ruleForm1'].resetFields();
      this.$refs['ruleForm2'].resetFields();
    },

如有疑问，欢迎讨论。