里程碑4:schema-form 动态组件开发
作者:互联网
2026-04-08
动态组件基于领域模型来设计,以数据驱动开发。
在模型中增加componentConfig来配置用到的组件的属性,每个字段增加componentOption来配置在每个动态组件中该字段的展现形式,及默认值等。
抽象出schema-form组件:使用动态组件来按需加载input、select等,form-item-config.js中列出组件的键值对。
schema-form下边的input,select等组件中需要引入ajv,根据领域模型中配置的标准schema,来校验相关表单项是否有效。提供出validate及getValue方法。
import inputNumber from './complex-view/input-number/input-number.vue';
import select from './complex-view/select/select.vue';
const formItemConfig = {
input: {
component: input,
},
inputNumber: {
component: inputNumber,
},
select: {
component: select,
},
};
export default formItemConfig;
从配置中拿到配置的组件,在schema-view中将动态组件引入。 使用抽屉形式弹出createForm、editForm、detailForm。
在schema中字段配置里配置createFormOption,editFormOption等,来设定该字段在这个组件中是否显示,以输入框还是select形式显示等。
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
sfsDb 时序数据处理指南
NineData 成功通过国家高新技术企业认定!
腾讯云轻量应用服务器管理:自动化轻量服务器 - Openclaw Skills
系统资源监控器:实时服务器健康追踪 - Openclaw Skills
前端老兵AI学习过程
工作笔记-CodeBuddy应用探索
OpenCode 完全指南:从 0 到 100K Star 的开源 AI 编码 Agent
Day11-龙虾哥打工日记:OpenClaw救援机器人 - 主系统挂了谁来救场?
Claude Code 创始人 Boris 揭秘:团队 10 倍效率技巧
拒绝“手搓”工具!带你硬核手写 MCP Server,解锁 Agent 的无限潜能
AI精选
