element plus 表单嵌套校验还不会用吗，看这一篇就够了

element存在数组嵌套的校验

下面这个代码片段是关于element中，如果存在一个数组，但是又需要对数组中的项进行校验的时候，可以通过 family.${index}.name 这种形式，对表单进行检测。

<template>
  <el-form :model="formData" :rules="formRule" ref="formRef">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item prop="family">
      <el-form-item
        v-for="(item, index) in formData.family"
        :key="index"
        :label="item.type"
        :prop="`family.${index}.name`"
        :rules="[{ required: true, message: '请输入' }]"
      >
        <el-input v-model="item.name" />
      </el-form-item>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="handleValidForm">校验</el-button>
</template>

<script setup lang="ts">
import { ref } from "vue";

const formRef = ref();
const formRule = {
  name: [{ required: true, message: "请输入" }],
  family: [{ required: true, message: "请输入", type: "array" }],
};

const formData = ref<{ [key: string]: any }>({
  name: "",
  family: [
    { type: "father", name: "" },
    { type: "mother", name: "" },
    { type: "sister", name: "" },
    { type: "brother", name: "" },
  ],
});

const handleValidForm = () => {
  formRef.value.validate((valid: any) => {
    if (!valid) return console.error("验证失败");
    console.log("验证通过");
  });
};
</script>

<style scoped></style>

如果要上述的family单独抽取出来作为组件，则需要针对在组件内部暴露一个方法，在父组件调用，在这里，因为嵌套层级问题，在生成了多个form，所以每一个form使用一个ref进行调用，为了简单对应，这里直接加上它的序号，所以直接使用了 proxy.$refs?.[formRef${i}]?.[0]?.validate()例如：

defineExpose({
  validate: () => {
    return new Promise(resolve => {
      formDataChild.value.forEach(async (o, i) => {
        try {
          await proxy.$refs?.[`formRef${i}`]?.[0]?.validate()
          if (i === formDataChild.value.length - 1) {
            resolve(true)
          }
        } catch (error) {
          resolve(false) // 抛出校验失败
          throw new Error(error)
        }
      })
    })
  },
})

在父页面组需要使用联合判断了，如下：

formRef.value.validate(valid=>{
    if (!valid) return
    const isValid = await childrenRef.value.validate()
    if (!isValid) return
    // 校验通过
})