Movk Nuxt

Array

View source

Array 字段类型的使用方法和配置选项

基础用法

使用 afz.array() 创建数组字段：

InputTags

InputTags 组件文档

标签输入框，设置 type: 'inputTags'，适合自由文本标签：

<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({
  tags: afz.array(afz.string(), {
    type: 'inputTags'
  })
    .default(['tag1', 'tag2'])
    .meta({
      label: '标签输入',
      hint: '输入后按 Enter 添加标签'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

CheckboxGroup

CheckboxGroup 组件文档

复选框组，设置 type: 'checkboxGroup'，适合预定义选项多选：

<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({
  notifications: afz.array(afz.string(), {
    type: 'checkboxGroup',
    controlProps: {
      items: [
        { label: '邮件', value: 'email' },
        { label: '短信', value: 'sms' },
        { label: '电话', value: 'phone' }
      ]
    }
  })
    .default(['email'])
    .meta({
      label: '复选框组',
      hint: '多选通知方式'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

对象数组

Collapsible 组件文档

对象数组自动使用折叠面板渲染，支持添加、删除项：

<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({
  experience: afz.array(
    afz.object({
      company: afz.string({
        controlProps: {
          placeholder: '公司名称'
        }
      }).min(1).meta({ label: '公司' }),
      position: afz.string({
        controlProps: {
          placeholder: '职位'
        }
      }).min(1).meta({ label: '职位' }),
      years: afz.number({
        controlProps: {
          placeholder: '工作年限'
        }
      }).int().min(0).max(50).meta({ label: '年限', hint: '工作年数' })
    }).meta({ label: '工作经历' })
  ).default([{
    company: '示例公司',
    position: '软件工程师',
    years: 3
  }]).meta({
    label: '工作经历列表',
    collapsible: { defaultOpen: true }
  })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <UCard>
    <MAutoForm :schema="schema" @submit="onSubmit" />
  </UCard>
</template>

动态数组

创建和管理动态添加或删除元素的表单数组。

<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({
  items: afz.array(
    afz.object({
      name: afz.string().meta({ label: '商品名称' }),
      quantity: afz.number().int().default(1).meta({ label: '数量', hint: '默认为 1' }),
      price: afz.number().min(0).meta({ label: '价格' })
    }).meta({ label: '商品', hint: '请填写商品信息' })
  ).default([
    { name: '苹果', quantity: 2, price: 5.99 },
    { name: '香蕉', quantity: 1, price: 3.99 }
  ]).meta({ label: '商品列表' })
})

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"
      :global-meta="{
        collapsible: { defaultOpen: true }
      }"
      :add-button-props="{
        color: 'primary',
        variant: 'soft',
        block: false
      }"
      @submit="onSubmit"
    />
  </UCard>
</template>

API

afz.array(elementSchema, meta?)

ElementSchema

定义数组元素的类型，决定输出类型为 T[]：

// 字符串数组
const schema1 = afz.array(afz.string())
// 输出类型：string[]

// 对象数组
const schema2 = afz.array(afz.object({
  name: afz.string(),
  age: afz.number()
}))
// 输出类型：{ name: string, age: number }[]