循环创建的el-form-item 中如何联动校验

您可以使用 rules 属性来实现循环创建的 el-form-item 之间的联动校验。具体步骤如下：

在循环中为每个 el-form-item 添加一个唯一的 ref 属性，用于在代码中获取对应的表单项。

<template>
  <el-form ref="myForm" :model="formData" :rules="formRules">
    <el-form-item v-for="(item, index) in formItems" :key="index" :ref="'item' + index" :prop="'field' + index">
      <el-input v-model="formData['field' + index]"></el-input>
    </el-form-item>
  </el-form>
</template>

在 data 中定义表单数据和校验规则。

data() {
  return {
    formItems: ['item1', 'item2', 'item3'], // 循环创建的表单项
    formData: {}, // 表单数据
    formRules: { // 校验规则
      field1: [
        { required: true, message: '请输入字段1', trigger: 'blur' }
      ],
      field2: [
        { required: true, message: '请输入字段2', trigger: 'blur' }
      ],
      field3: [
        { required: true, message: '请输入字段3', trigger: 'blur' }
      ]
    }
  }
}

在需要进行联动校验的地方，使用 $refs 获取到对应的表单项，并手动调用 validate 方法进行校验。

methods: {
  validateForm() {
    const form = this.$refs.myForm
    form.validate((valid) => {
      if (valid) {
        // 校验通过，进行其他操作
      } else {
        // 校验失败，进行错误处理
      }
    })
  },
  validateItem(index) {
    const item = this.$refs['item' + index]
    item.validate((valid) => {
      if (!valid) {
        // 单个表单项校验失败，进行错误处理
      }
    })
  }
}

通过上述步骤，您可以实现循环创建的 el-form-item 之间的联动校验。在调用 validateForm 方法时，会对整个表单进行校验；在调用 validateItem 方法时，会对指定的表单项进行校验。