### 如何在 `a-form-model-item` 中为数组类型的 `prop` 设置验证规则 在 Ant Design Vue 的表单组件中，`a-form-model-item` 是用于定义表单项的一个重要部分。当处理数组类型的字段时，可以通过特定的方式为其设置验证规则。 #### 表单模型与验证规则的关系 在 `a-form-model` 中，`:model` 属性绑定了整个表单的数据对象，而每个 `a-form-model-item` 使用 `:prop` 来指定具体的字段路径[^1]。对于数组类型的字段，可以利用嵌套结构来定义其验证规则。例如： ```vue <template> <a-form-model :model="form" :rules="rules"> <a-form-model-item label="Items" prop="items"> <div v-for="(item, index) in form.items" :key="index"> <a-input v-model="form.items[index]" /> </div> </a-form-model-item> </a-form-model> </template> <script> export default { data() { return { form: { items: ['Item 1', 'Item 2'] }, rules: { items: [ { required: true, message: 'Please enter at least one item.', type: 'array' } ] } }; } }; </script> ``` 在这个例子中，`items` 字段是一个数组，并通过 `type: 'array'` 明确指定了该字段的类型[^2]。这样可以让框架知道需要针对数组执行相应的验证逻辑。 #### 动态绑定数组中的每一项 为了更细致地控制数组内的每一个元素，可以在验证规则中进一步扩展。比如，确保数组中的每一条数据都满足某些条件： ```javascript rules: { items: [ { required: true, message: 'At least one item is required.', type: 'array' }, { type: 'array', min: 1, message: 'Array must have at least one element.' }, { validator: (rule, value, callback) => { if (!value.every(item => typeof item === 'string')) { callback(new Error('All elements must be strings.')); } else { callback(); } }, trigger: 'change' } ] } ``` 这里不仅设置了基本的要求（如必填性和最小长度），还自定义了一个验证器函数来检查数组内部的具体内容是否符合预期标准[^3]。 #### 关于 `lodash.get` 和深层路径的支持 类似于 Element Plus，在复杂场景下可能会涉及深层次的对象属性访问。此时可以借助工具库如 Lodash 提供的帮助方法——`.get()` 函数简化操作过程。虽然官方文档并未强制推荐此方式，但在实际开发过程中确实能够带来便利性。例如： 假设存在如下结构： ```json { "address": { "details": ["Street", "City"] } } ``` 则可通过以下形式完成对其子节点的校验配置： ```javascript rules: { 'address.details': [{ type: 'array', required: true }] } ``` 或者结合 lodash 实现更加灵活的操作[^4]。 --- ### 总结 综上所述，无论是 Ant Design Vue 还是其他类似的 UI 库，它们的核心理念均围绕着清晰分离视图层与业务逻辑展开设计；而在具体到像数组这样的特殊情况下，则需额外注意如何合理运用内置机制以及第三方辅助手段达成目标效果。