对于动态增减表单的校验处理

校验的三个基本设置依旧是 model / rules / prop,往常普通用的校验需要单独绑定元素,但对于遍历出来的新增数据一般不清楚有多少个,所以需要拿到当前遍历出来的索引值.

model:

• 依旧是对象,只不过在遍历情况下数据可能绑定到数组,所以可以用一个花括号包裹,形成对象即可.

<el-form class="member-info" :model="{ users }" ref="userForm">
</el-form>

rules:

• 对于element, 除了在 form 绑定一个全局的rules 对象以外, 如果表单项不确定, 是遍历生成的话, 生成多少表单项就应该有多少个规则, element允许直接在生成表单项的模板中直接针对当前 form-item 编写规则数组

 :rules="[{ required: true, message: '请输入数据', trigger: 'blur' }]"

重点在prop的绑定:

指定在 model 里面寻找数据的路径,但是整个属性需要是字符串, 其中中间的 index 可变, 所以应该是利用拼接字符串的方法来实现users[${index}].username

:prop="`users[${index}].username`"

<el-form class="member-info" :model="{ users }" ref="userForm">
      <div class="member-info-item" v-for="(item, index) in users" :key="index">
        <el-form-item
          label="姓名"
          :rules="[{ required: true, message: '请输入数据', trigger: 'blur' }]"
          :prop="`users[${index}].username`"
        >
          <el-input
            placeholder="请输入姓名"
            class="input-with-select"
            v-model="item.username"
          >
          </el-input>
        </el-form-item>
      </div>
    </el-form>

总结:

对于动态增减表单项的校验方式
依然是三个重要部分
model 将 users 用花括号包裹, 硬造一个对象
prop 字符串拼接, 把每个遍历到的表单 index 放入 字符串中
rules 没办法 form 上面全局设置所有字段的对象, 就变成了表单项单独自己设置规则数组

效果