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

效果图：

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

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

template：

      
        
      


      
        
      
      
        
      
      
        提交
        重置
      

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();
    },

如有疑问，欢迎讨论。