关于 ant-design-vue 的深度校验方法（有坑）

<template>
    <div>
        <a-form :model="form" ref="formRef">
            <a-form-item
                ref="formaaaaabbbbbRef"
                :name="[ 'aaaaa', 'bbbbb' ]"
                :rules="[ { required: true, message: ' form.aaaaa.bbbbb 不能为空', trigger: 'blur' } ]">
                <a-input v-model:value="form.aaaaa.bbbbb"></a-input>
            </a-form-item>
            <a-form-item
                name="ccccc"
                :rules="[ { required: true, message: ' form.ccccc 不能为空', trigger: 'blur' } ]">
                <a-input v-model:value="form.ccccc"></a-input>
            </a-form-item>
            <a-form-item
                name="ddddd"
                :rules="[ { required: true, message: ' form.ddddd 不能为空', trigger: 'blur' } ]">
                <a-input v-model:value="form.ddddd"></a-input>
            </a-form-item>
        </a-form>
        <a-button @click="checkVal('bbbbb')">点击校验 form 中 aaaaa 中的 bbbbb</a-button>
        <a-button @click="checkVal('ccccc')">点击校验 form 中的 ccccc</a-button>
        <a-button @click="checkVal('ddddd')">点击同时校验 form 中的 ccccc 和 ddddd</a-button>
        <a-button @click="checkVal('all')">校验所有</a-button>
        <a-button @click="checkVal('reset')">重置并移除校验结果</a-button>
    </div>
</template>
<script>
import { ref } from 'vue';

export default {
    components: {},
    setup() {
        const form = ref({
            aaaaa: {
                bbbbb: ''
            },
            ccccc: '',
            ddddd: ''
        });

        const formRef = ref(null)

        const formaaaaabbbbbRef = ref(null)

        const checkVal = (type) => {
            if(type == 'bbbbb'){
                // formRef.value.validate('aaaaa.bbbbb') // 失败
                // formRef.value.validate(['aaaaa', 'bbbbb']) // 失败
                // formRef.value.validateFields('aaaaa.bbbbb') // 失败
                // formRef.value.validateFields(['aaaaa', 'bbbbb']) // 失败
                // formRef.value.validateFields('aaaaa["bbbbb"]') // 失败
                // formRef.value.validateFields('aaaaa[bbbbb]') // 失败
                // formRef.value.validate([['aaaaa', 'bbbbb']]) // 成功
                formRef.value.validateFields([['aaaaa', 'bbbbb']]) // 成功
            }
            if(type == 'ccccc'){
                // formRef.value.validate(['ccccc']) // 成功
                // formRef.value.validate('ccccc') // 成功
                // formRef.value.validateFields('ccccc') // 成功
                formRef.value.validateFields(['ccccc']) // 成功
            }
            if(type == 'ddddd'){
                // formRef.value.validate(['ddddd']) // 成功
                // formRef.value.validate('ddddd') // 成功
                // formRef.value.validateFields('ddddd') // 成功
                formRef.value.validateFields(['ccccc', 'ddddd']) // 成功
            }
            if(type == 'all'){
                formRef.value.validate()
            }
            if(type == 'reset'){
                formRef.value.resetFields()
            }
        };

        return {
            form,
            formRef,
            checkVal,
            formaaaaabbbbbRef
        };
    }
};
</script>
<style lang="less" scoped></style>