el-form 实现循环表单并且校验规则_el-form 循环验证

先看效果图:

以下是html代码
 <el-form
    :model="newObj"
    ref="dataForm"
    :inline="true"
    class="demo-form-inline"
    v-for="(domain, index) in newObj.newObjArr"
    :key="domain.key"
  >
    <el-form-item
      label="楼名"
      :prop="'newObjArr.' + index + '.name'"
      :rules="{
        required: true,
        message: '楼名不能为空',
        trigger: 'blur'
      }"
    >
      <el-input v-model="domain.name" placeholder="请输入楼名"></el-input>
    </el-form-item>

    <el-form-item
      label="负责人"
      :prop="'newObjArr.' + index + '.principalId'"
      :rules="{
        required: true,
        message: '负责人不能为空',
        trigger: 'blur'
      }"
    >
      <el-select v-model="domain.principalId" placeholder="请选择负责人">
        <el-option
          v-for="item in principalList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.disabled"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="add">+</el-button>
      <el-button @click="cut(index)">-</el-button>
      <el-button @click="up(index)">↑</el-button>
      <el-button @click="down(index)">↓</el-button>
    </el-form-item>
  </el-form>

  <div style="text-align: center">
    <el-button @click="submitNewObj" type="primary">提交</el-button
    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button @click="cut(index)" type="info">取消</el-button>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

以下是js代码

submitNewObj() {
  //循环校验数据合法性
  var checkResult = true;
  var validateArr = this.$refs["dataForm"];
   //1.由于此时需要校验的  = this.$refs["dataForm"] 是个数组所有需要循环校验
   //2.  this.$refs["dataForm"]. validate 是异步的. 使用  return new Promise 可以实现同步
   //3 循环校验完了 如果  定义的checkResult 还是 true 就提交数据
  validateArr.forEach(item => {
    return new Promise((resolve, reject) => {
      item.validate(valid => {
        if (valid) {
          resolve(true);
        } else {
          checkResult = false;
          console.log("错了 你停下来了吗?");
          resolve(false);
    
        }
      });
    });
  });
  //2 提交数据
  if (checkResult) {
   //  TODO  发送ajax 提交数据
    alert("提交数据");
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27