el-form v-for循环列表的表单如何校验

在Vue中使用el-form进行表单验证时，如果你需要对使用v-for循环生成的表单项进行验证，你可以使用el-form-item的prop属性来指定每个表单项的验证规则。每个prop值都应该是一个唯一的标识符，它将绑定到表单数据中对应的属性上。

以下是一个简单的例子：

<template>
  <el-form :model="form" ref="form" label-width="120px">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.value'"
      :label="'Item ' + (index + 1)"
      :rules="[
        { required: true, message: 'This field is required', trigger: 'blur' }
      ]"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { value: '' },
          { value: '' },
          // ...
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('Form is valid!');
        } else {
          alert('Form is invalid!');
        }
      });
    }
  }
};
</script>

在这个例子中，form对象包含一个items数组，每个数组项都有一个value属性，这将用于绑定el-input组件的输入值。el-form-item的prop属性被设置为"items." + index + ".value"，这样每个表单项都会验证它所对应的表单数据项。当点击提交按钮时，会调用validate方法来执行表单验证。如果所有表单项都通过验证，会弹出一个确认框显示“Form is valid!”，如果有任何一项未通过验证，则会显示“Form is invalid!”。