循环生成的表单的必填校验

在循环生成的表单中，如果每个元素都需要进行必填校验，你可以通过数据驱动的方式来实现。首先，在你的Vue实例的数据中，你可以创建一个数组来存储每个输入元素的状态，比如是否已填写。然后，将这个状态数组绑定到HTML模板中的每个输入元素。

假设我们有如下数据模型：

data() {
  return {
    items: [
      { name: '', isFilled: false }, // 第一个元素
      { name: '', isFilled: false }, // 第二个元素
      ... // 其他元素
    ]
  }
}

在模板中，你可以这样显示每个输入并进行必填校验：

<template v-for="(item, index) in items">
  <el-form-item :label="'姓名 ' + (index + 1)">
    <el-input v-model="item.name" :disabled="!item.isFilled"></el-input>
    <span class="required" v-if="!item.isFilled">必填</span>
    <button @click="setFilled(index)">设置必填</button>
  </el-form-item>
</template>

当你点击“设置必填”按钮时，可以调用`setFilled`方法去改变对应元素的`isFilled`状态：

methods: {
  setFilled(index) {
    this.items[index].isFilled = true; // 设置必填标志为true
    // 如果需要，还可以在此处添加必填校验，例如：
    this.$refs.form.validateFields(() => {
      if (!this.items[index].name) {
        console.error('第' + (index + 1) + '个姓名不能为空');
      }
    });
  }
}

这样，每当某个输入元素变为非空，其`isFilled`状态就会变为`true`，并且输入框会被锁定。如果用户尝试提交表单时，`validateFields`会检查每个必填项。