vue+elementui给遍历生成表单添加效验

在Vue中结合Element UI使用el-form和el-form-item组件来创建表单，并通过v-for指令来遍历数据生成表单项，同时可以利用prop属性来指定表单验证字段。

以下是一个简单的例子，展示了如何使用Vue和Element UI来创建一个包含验证规则的动态表单：

<template>
  <el-form :model="form" ref="form" label-width="120px">
    <el-row :gutter="20" v-for="(item, index) in form.items" :key="index">
      <el-col :span="12">
        <el-form-item
          :label="`Item ${index + 1}`"
          :prop="'items.' + index + '.value'"
          :rules="[{ required: true, message: 'This field is required', trigger: 'blur' }]"
        >
          <el-input v-model="item.value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <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!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个form对象，它有一个items数组属性，items数组中的每个对象都有一个value属性。在模板中，我们使用v-for来遍历form.items，为每个项创建一个el-form-item，并通过:prop和:rules绑定来指定验证规则。:prop属性是用来指定表单验证字段的，它的值是一个字符串，表示对象的路径。:rules属性是一个数组，包含了验证规则对象。

当用户点击提交按钮时，会触发submitForm方法，该方法会调用this.$refs.form.validate来进行表单验证。如果表单验证通过，会弹出一个提示“Form is valid!”的对话框；如果表单验证不通过，会弹出一个提示“Form is invalid!”的对话框，并且不会提交表单。