element ui form 循环生成表单条目之后添加验证条件

1.html 代码

 注意事项

     1. form 表单要加命名  比如 ref="ruleForm"

      2.每一列上都要加上验证条件比如：

           

:rules="{

            required: true, message: '金额合计不能为空', trigger: 'blur'

          }"

  3.重点在第二行，循环之后的prop 比如  .money 是自己的字段，与 <el-input中要输入的字段相互对应，自己修改修改就可以了。

 :prop="'expensesDetailList.'+ index +'.money'"

 <el-form ref="ruleForm" label-position="right" label-width="180px" :model="formLabelAlign">
        <el-form-item
          prop="moneySum"
          label="金额合计"
          :rules="{
            required: true, message: '金额合计不能为空', trigger: 'blur'
          }"
        >
          <el-input
            v-model="formLabelAlign.moneySum"
            clearable
            type="number"
            placeholder="请输入收款单位名称"
          />
        </el-form-item>
        <el-form-item
          v-for="(entrys, index) in formLabelAlign.expensesDetailList"
          :key="entrys.id"
          :label="entrys.purpose"
          :prop="'expensesDetailList.'+ index +'.money'"
          :rules="{
            required: true, message:entrys.purpose+'不能为空', trigger: 'blur'
          }"
        >
          <el-input v-model="entrys.money" type="number" />
        </el-form-item>
      </el-form>

      <div style="text-align: center;margin-top:15px">
        <el-button type="primary" @click="unpatByFinish()">确定</el-button>
        <el-button @click="expenseVisible = false">取消</el-button>
      </div>

2.js验证（这个很简单不介绍了，如果不行微信联系，暗号ypz131023）

  unpatByFinish() {
      // this.expenseVisible = true
      // upExp
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          upExp(this.formLabelAlign).then(data => {
            this.$message.success('修改成功');
            this.expenseVisible = false;
            this.getList();
          });
        } else {
          this.$message.warning('数据不完整，请填写完整！');
        }
      });
    }