表单设计最佳实践
YH-UI 的表单组件,尤其是 FormSchema,适合用于需要统一字段定义、校验规则和渲染逻辑的 schema 驱动表单场景。
为什么选择 YH-UI 表单?
1. 逻辑高度聚合
在传统开发模式中,表单的布局、数据联动、校验逻辑往往分散在 template、script 和冗长的 watch 中。YH-UI 通过 FormSchema 将这些逻辑统一收敛到一份 JSON 配置中:
- 声明式联动:通过
props、hidden函数直接根据当前模型状态计算 UI 表现。 - 内聚布局:Schema 支持基于列的布局配置,便于将相关表单结构集中维护。
2. 极致的类型安全 (DX)
表单相关包同时暴露了实例类型,便于在业务中直接使用:
- 精确推断:导出的
FormSchemaInstance提供了完整的 API 补全。 - 公开实例类型:可以从公开导出中引入
FormSchemaInstance和FormInstance。
3. 表单实力的安全性
- 校验 API:schema/form 实例都暴露了
validate、resetFields、clearValidate、scrollToField。 - 模型访问:
FormSchemaInstance还暴露了getModel、setFieldValue和formRef。
高级应用示例
这个示例展示了 YH-UI 表单引擎处理复杂逻辑的能力:动态分组、多级联动、异步验证、自定义渲染、以及完善的类型安全。
企业级入驻表单