Skip to content

DyFormItem

DyFormItem 是动态表单的单项配置类型。你传入 NaiDynamicFormitems 数组,每一项就是一个 DyFormItem

SelectOptionItem

字段说明类型默认值必填
label展示文本string
value选项值any
class自定义 classstring
style自定义样式string | CSSProperties
disabled是否禁用boolean

BaseDyFormItem

字段说明类型默认值必填
key字段标识(建议与表单 model 字段一致)keyof T
label表单项 labelstring
value响应式值(表单数据来源)Ref<any>,使用useReactiveFormuseDecorateForm包装的可以省略ref函数,会做包装处理
placeholder占位提示string
options选项数据(select/checkbox/radio 等)SelectOptionItem[] | any[]
onChange值变化回调(value: any, associationItem: DyFormItem, options?: SelectOptionItem[] | any[]) => void
span栅格占位(preset="grid" 时常用)number
offset偏移占位(preset="grid" 时常用)number
sort排序字段(如果启用排序逻辑则按此排序)number

DyFormItem

DyFormItem<K, RuleT> 继承自 BaseDyFormItem<K>,并扩展渲染、校验、显示控制等能力。

字段说明类型默认值必填
path表单校验 path(不传则默认使用 keystring
hidden是否隐藏该项booleanfalse
render2自定义渲染函数(返回 VNode)(formItem: DyFormItem) => VNode
reset自定义重置逻辑(formItem: DyFormItem) => void
rule单项校验规则(由具体 UI 层决定类型,如 Naive UI 的 FormItemRule 等)RuleT
required简化必填(若未传 rule,可自动生成必填规则)booleanfalse
requiredHint必填提示(label: string) => string"label"不能为空
disabled禁用状态(支持 boolean 或 Ref<boolean>)boolean | Ref<boolean>false
clearable是否允许清空booleanfalse
type简化类型(常用于 input)"text" | "textarea" | "password""text"
rows多行输入行数(type="textarea" 常用)number
labelFieldoptions 的 label 字段名映射string
valueFieldoptions 的 value 字段名映射string
filterable是否可过滤(select 类常用)booleanfalse
multiple是否多选(select 类常用)booleanfalse

关于 RuleT

DyFormItemrule 使用泛型 RuleT 以避免在通用类型文件中绑定某个 UI 框架。
例如在 Naive UI 模块中可以把 RuleT 绑定为 FormItemRule \| FormItemRule[]

ZealPagination

分页hooks参数

字段类型说明
pageNonumber当前页码
pageSizenumber每页数量
totalnumber总条数(映射到 itemCount
pageSizesnumber[]可选每页条数
pageSlotnumber页码按钮展示数量(传给 NPagination.pageSlot
showSizePickerboolean是否显示 size picker
onChange() => void页码变化回调
onPageSizeChange() => void每页数量变化回调

ZealColumn<T>

EleZealTable 的列配置类型,用于描述每一列如何展示、对齐、宽度、排序、以及自定义渲染。

字段说明类型默认值必填
label列标题string-
prop行数据字段名(用于默认显示 row[prop]keyof T-
key列唯一 key(不传会用 prop/label 生成)string-
width列宽string | number-
minWidth最小列宽string | number-
type特殊列类型(选择/序号/展开)'default' | 'selection' | 'index' | 'expand''default'
align列内容对齐'left' | 'center' | 'right'-
fixed固定列boolean | 'left' | 'right'-
sortable是否排序('custom' 为自定义排序)boolean | 'custom'-
showOverflowTooltip内容溢出时显示 tooltipboolean-
resizable列宽可拖拽调整boolean-
render2自定义单元格渲染(优先级最高)(row: T, $index: number) => VNode-
slot指定具名单元格插槽 key(用于匹配组件 slots)string-