element pulus 的form表单如何对多层for循环做校验

在Element Plus的`<form>`标签中处理多层嵌套的`<for>`循环进行验证，可以结合Vue.js的数据绑定和自定义指令或者组件的方式。首先，你需要为每个循环元素创建一个独立的数据项，并定义相应的验证规则。

假设你有一个数组对象，表示多层结构：

data() {
  return {
    items: [
      { name: '', required: true },
      { children: [{ name: '', required: true }, { name: '' }] }
    ]
  };
}

然后，你可以通过`v-for`遍历这个数组，并为每个字段设置一个`v-model`，同时使用`:validate="validateItem"`绑定一个自定义的验证函数，例如：

<form :model="items" @submit.prevent>
  <el-form-item v-for="(item, index) in items">
    <div v-if="Array.isArray(item.children)">
      <!-- 遍历内部数组 -->
      <el-form-item v-for="(child, childIndex) in item.children" :key="childIndex" :label="child.name + ' (层级 ' + (index+1) + ')'" :rules="{ required: child.required }">
        <input type="text" v-model="child.name">
      </el-form-item>
    </div>
    <!-- 对顶级元素进行验证 -->
    <el-form-item :label="item.name + ' (层级 ' + index + ')'">
      <input type="text" v-model="item.name">
    </el-form-item>
  </el-form-item>

  <el-row :gutter="24">
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button type="warning" @click="resetForm">重置</el-button>
  </el-row>
</form>

<script setup>
import { ElFormItem, ElButton } from "element-plus";
import { defineEmits, ref } from "vue";

const emit = defineEmits(["submitForm", "resetForm"]);

function validateItem(formItem) {
  // 根据FormItem的数据进行复杂验证
  if (!formItem.valid) {
    console.log('验证失败:', formItem.errors);
    return false;
  }
  return true;
}

const submitForm = () => {
  // 先验证所有项
  const allValid = Array.from(items).every(validateItem);
  if (allValid) {
    emit("submitForm");
  }
};

const resetForm = () => {
  emit("resetForm");
};
</script>

在这个例子中，每层循环都对应一个`el-form-item`，并且我们定义了一个自定义的`validateItem`函数来检查每个单独的对象是否有效。点击“提交”按钮时，会对整个数组进行验证。如果所有项都通过验证，才会触发提交事件。