API 参考

SmartForm 系列 Props

TL;DR

通过 fieldsConfig 一次性生成可复用表单，支持 Modal/Drawer 形态与联动、校验、上传等。

组件

  • SmartForm（内嵌表单）
  • SmartModalForm（弹窗表单）
  • SmartDrawerForm（抽屉表单）

最小示例

import { SmartModalForm } from '@/components/admin/smart-form'

const fieldsConfig = [
  { key: 'name', title: '名称', type: 'text', form: { required: true } },
  { key: 'enable', title: '启用', type: 'switch', form: { defaultValue: true } },
]

<SmartModalForm
  title="创建"
  open={open}
  onOpenChange={setOpen}
  fieldsConfig={fieldsConfig}
  onFinish={async (values) => { await create(values); return true }}
/>

通用 Props（节选）

  • fieldsConfig: FieldConfig[]（必填）
  • initialValues?: object
  • onFinish: (values) => Promise<boolean>（SmartModal/Drawer 返回 true 关闭）
  • onValuesChange?: (changed, all) => void
  • layout?: 'horizontal' | 'vertical' | 'inline'
  • disabled?: boolean
  • readonly?: boolean
  • grid?: boolean — 开启后配合 colProps 做栅格
  • colProps?: { span?: number } — 字段占比

Modal/Drawer 专属

  • title: string
  • open: boolean
  • onOpenChange: (open: boolean) => void
  • width?: number
  • placement?: 'left' | 'right'（Drawer）

字段联动与条件显示

{
  key: 'discountValue',
  title: '优惠值',
  type: 'number',
  form: {
    dependencies: ['discountType'],
    fieldProps: (form) => ({ suffix: form.getFieldValue('discountType') === 'percent' ? '%' : '元' }),
    visible: (form) => form.getFieldValue('discountType') !== undefined,
  }
}

相关

  • 字段配置：api/FIELDS_CONFIG
  • CRUD 页面：api/SMART_CRUD_PAGE

On this page

SmartForm 系列 Props
组件
最小示例
通用 Props（节选）
Modal/Drawer 专属
字段联动与条件显示
相关