element-ui表单的多层循环验证处理详解

2023-11-08 20:39:25

element-ui 表单的多层循环验证处理详解

在日常项目开发过程中，我们经常会遇到需要验证表单中数组数据字段的情况，比如一个表单中包含一个数组字段，该字段中的每个元素都需要进行验证，该如何处理呢？

1. 问题

假设我们有一个表单，其中包含一个名为 items 的数组字段，每个 item 都包含两个字段：name 和 age。我们希望对 name 和 age 字段进行验证，确保它们不能为空。

2. 常规做法

对于这种情况，我们可以使用 v-for 指令来循环数组，并在每个循环项中使用 v-model 指令来绑定字段值。然后，我们就可以在表单中使用 rules 属性来定义验证规则。

<el-form :model="form" :rules="rules">
  <el-form-item label="Items" prop="items">
    <el-table v-for="(item, index) in form.items" :key="index">
      <el-table-column label="Name">
        <el-input v-model="item.name"></el-input>
      </el-table-column>
      <el-table-column label="Age">
        <el-input v-model="item.age"></el-input>
      </el-table-column>
    </el-table>
  </el-form-item>
</el-form>

const rules = {
  'items.*.name': [
    { required: true, message: 'Name is required', trigger: 'blur' }
  ],
  'items.*.age': [
    { required: true, message: 'Age is required', trigger: 'blur' }
  ]
};

3. 问题所在

当我们使用上述方法时，我们会发现一个问题：当我们提交表单时，虽然表单中的数据都满足了验证规则，但表单仍然无法通过验证。这是因为 v-for 指令生成的 item 变量并不是一个响应式对象，因此当我们修改 item 的值时，并不会触发表单验证。

4. 解决方法

为了解决这个问题，我们需要使用 v-model 指令来绑定 item 变量。这样，当我们修改 item 的值时，表单验证就会自动触发。

<el-table v-for="(item, index) in form.items" :key="index">
  <el-table-column label="Name">
    <el-input v-model="item.name"></el-input>
  </el-table-column>
  <el-table-column label="Age">
    <el-input v-model="item.age"></el-input>
  </el-table-column>
</el-table>