el-from中对象中的对象如何做表单校验

在Element UI的`el-form`中，如果需要对嵌套的对象数据进行校验，可以将验证规则对象嵌套在更深层次。假设有一个对象结构如下：

{
  personalInfo: {
    name: {
      required: true,
      message: '姓名不能为空'
    },
    age: {
      number: true,
      min: 18,
      max: 100,
      message: '年龄需在18到100之间'
    }
  }
}

在这种情况下，你需要在表单的`model`中映射这个复杂对象，并在`rules`中按照层次结构指定对应的验证规则。比如在Vue模板里：

<template>
  <el-form :model="formData" :rules="validationRules">
    <el-form-item label="个人信息">
      <el-form-item :label="item.label" v-for="(item, index) in formData.personalInfo" :key="index" :rules="item.rules">
        <el-input v-model="formData.personalInfo[item.prop]"></el-input>
        <span class="error">{{ item.message }}</span>
      </el-form-item>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        personalInfo: {
          name: '',
          age: null,
        },
      },
      validationRules: {
        personalInfo: {
          name: {
            required: true,
            message: this.$t('nameRequired'),
          },
          age: {
            type: 'number',
            min: 18,
            max: 100,
            message: this.$t('ageRange')
          },
        },
      },
    };
  },
};
</script>

这样，当你提交表单时，`el-form`会对`personalInfo`下的每一个字段进行单独的验证。