可折叠字段
使用折叠功能将嵌套字段组织成可展开/收起的部分，提高表单的整洁性和可读性。
基础用法
折叠功能基于 Nuxt UI 的
UCollapsible 组件实现，支持动画效果和响应式配置。<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'
const { afz } = useAutoForm()
const toast = useToast()
const schema = afz.object({
contacts: afz.array(
afz.object({
name: afz.string().meta({ label: '姓名' }),
email: afz.email().meta({ label: '邮箱' })
})
).meta({
label: '联系人列表',
collapsible: { defaultOpen: true }
}).default([
{ name: '张三', email: 'zhangsan@example.com' },
{ name: '李四', email: 'lisi@example.com' }
])
})
type Schema = z.output<typeof schema>
const form = ref<Partial<Schema>>({})
async function onSubmit(event: FormSubmitEvent<Schema>) {
toast.add({
title: '提交成功',
color: 'success',
description: JSON.stringify(event.data, null, 2)
})
}
</script>
<template>
<UCard>
<MAutoForm :schema="schema" :state="form" @submit="onSubmit" />
</UCard>
</template>
配置选项
AutoFormNestedCollapsible
collapsible 属性接受一个配置对象，支持以下选项：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
enabled | boolean | true | 是否启用折叠功能 |
defaultOpen | boolean | 默认是否展开 | |
open | boolean | 控制展开/收起状态（受控模式） | |
disabled | boolean | 禁用折叠功能（始终展开） | |
unmountOnHide | boolean | true | 隐藏时卸载内容 |
as | string | 'div' | 渲染的元素类型 |
class | ClassNameValue | CSS 类名 | |
ui | { root?: ClassNameValue; content?: ClassNameValue; } | UI 样式配置 |
样式自定义
全局样式
通过 app.config.ts 自定义折叠面板的全局样式：
app.config.ts
export default defineAppConfig({
ui: {
collapsible: {
slots: {
root: 'border border-gray-200 rounded-lg mb-4',
content: 'p-4 space-y-4'
}
}
}
})