低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载本篇文章围绕开源项目 form-create 中的 TDesign 适配包form-create/tdesign展开它让开发者通过 JSON 规则即可生成基于 TDesigntdesign-vue-next的 Vue3 动态表单并自带数据收集、验证、提交、联动与子表单能力。读完本文你将掌握该包的版本分支选择与安装方式、JSON 规则与 maker 链式生成两种建模方式、表单与按钮的默认配置项以及从入口到渲染的源码级工作原理可直接在政务、OA、ERP 等 Vue3 TDesign 项目中落地使用。包定位与核心特性根据 packages/tdesign/README.md 的定义FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件而form-create/tdesign正是其在 TDesign 体系下的实现版本Vue3对应 npm 上的next分支。其官方列出如下特点使用 JSON 数据生成表单支持扩展可生成任何 Vue 组件和 HTML 标签支持 8 个 UI 框架Element、Ant Design Vue、Arco、Naive、TDesign、iView、View Design、Vant 等支持组件之间联动control配置项提供丰富的表单操作 API支持子表单object/subForm和分组group/array高性能适配移动端支持多语言。从仓库结构看该包位于 packages/tdesignmonorepo 中同时存在 element-ui、ant-design-vue、arco-design、naive-ui、tiny-vue、vant 等同类适配包form-create/tdesign是其中专门面向腾讯 TDesign 组件库的一版。支持的 UI 框架与包生态原文档中的「包说明」表完整列出了 form-create 家族的各版本包及其适用框架包名说明form-create/element-uielement-plus 版本form-create/ant-design-vueant-design-vue 版本form-create/arco-designarco-design 版本form-create/naive-uinaive-ui 版本form-create/tdesigntdesign 版本form-create/iviewiview 版本form-create/view-designview-design 版本form-create/vantvant 版本移动端form-create/designer可视化表单设计器form-create/vant-designer移动端表单设计器从 packages/tdesign/package.json 可以看到form-create/tdesign的运行时依赖集中在 form-create 内部包与核心库form-create/core表单引擎核心form-create/utils工具函数库form-create/component-subform子表单组件form-create/component-tdesign-frameTDesign 版 frame弹层选择组件form-create/component-tdesign-groupTDesign 版 group批量添加组件form-create/component-tdesign-uploadTDesign 版 upload上传组件同时其peerDependencies声明了vue: ^3.5.12开发依赖中则使用tdesign-vue-next: ^1.10.7作为底层组件库版本号package.json 中为3.3.4与 Vue3 分支保持同步。版本分支与安装方式原文档明确指出仓库按分支管理版本这点在使用时最容易踩坑latestVue 2.0 版本分支superVue 2.7 版本分支该版本功能和 next 分支功能一致nextVue 3.0 版本分支。因此安装form-create/tdesign时必须显式指定分支标签否则默认拿到的是 Vue2 的 latest 版本。例如安装 Vue 2.7 版本的form-create/tdesignnpm install form-create/tdesignsuper安装 Vue 3 版本的form-create/tdesignnpm install form-create/tdesignnext在使用 Vue3 项目时务必安装next标签版本Vue2.7 项目则安装super标签版本两者功能对齐便于平滑升级。快速开始引入与注册以 Vue3 项目为例安装form-create/tdesignnext后可通过两种方式接入 TDesign 组件。方式一按需自动注册推荐form-create/tdesign自带的 auto-import.js 会从tdesign-vue-next中按需导入 Form、FormItem、Row、Col、Input、Button、Cascader、AutoComplete、CheckboxGroup、RadioGroup、ColorPicker、DatePicker、DateRangePicker、InputNumber、RangeInput、Select、Slider、Switch、TagInput、TimePicker、TimeRangePicker、TreeSelect、Upload、Tree、Dialog、Popup、Transfer 等 20 余个组件并注册到当前应用实例同时引入 TDesign 样式。在入口文件中这样使用参考 examples/main.jsimport { createApp } from vue; import install from form-create/tdesign/auto-import; import FormCreate from form-create/tdesign; import App from ./App.vue; const app createApp(App); FormCreate.use(install); // 按需注册 TDesign 组件与样式 app.use(FormCreate); // 安装 FormCreate 插件 app.mount(#app);方式二全量引入 TDesign也可以全量引入tdesign-vue-next插件再安装 FormCreate两种方式最终都会让表单引擎拿到所需的t-form、t-input等组件。在组件模板中通过form-create组件绑定规则、选项与数据即可渲染表单参考 examples/App.vuetemplate form-create :rulerule v-model:apifapi :optionoption v-modelformData changechange / /template其中rule是表单生成规则数组JSON 结构option是表单整体配置布局、按钮等formData是表单数据对象v-model 双向绑定fapi拿到表单实例 API 后可动态操作表单。JSON 驱动两种规则建模方式TDesign 包同时支持纯 JSON 规则与maker 链式生成两种建模方式二者最终都会归一为同一套规则结构。方式一纯 JSON 规则直接给出规则数组即可每个字段描述一个组件参考 examples/jsonRule.jsconst rule [ { type: input, // 组件类型对应 TDesign 组件别名 title: 商品名称, field: goods_name, // 字段名对应 formData 中的 key value: iphone, props: { placeholder: 请输入商品名称, disabled: false, }, validate: [ { required: true, message: 请输入商品名称, trigger: blur } ] }, { type: radio, title: 是否包邮, field: is_postage, value: 0, options: [ { value: 0, label: 不包邮, disabled: false }, { value: 1, label: 包邮, disabled: false }, { value: 2, label: 未知, disabled: true }, ] }, { type: select, field: cate_id, title: 产品分类, value: [104, 105], props: { multiple: true }, options: [ { value: 104, label: 生态蔬菜 }, { value: 105, label: 新鲜水果 }, ] }, ];规则中的type会经过组件别名映射层解析到具体的 TDesign 组件详见下一节props原样透传给该组件validate为校验规则数组options为选项数据。方式二maker 链式生成form-create/tdesign从入口 src/index.js 导出maker对象支持以链式调用生成规则参考 examples/rule.jsimport { maker } from form-create/tdesign; const rule [ maker.hidden(id, 14), maker.input(商品名称, goods_name, iphone) .props({ placeholder: 请输入商品名称, clearable: true, maxlength: 10, }) .validate([ { required: true, message: 请输入商品名称, trigger: change } ]) .style(color:red) .wrap({ style: color:red, class: asdfasdf }) .info(请输入商品名称!!!!!), maker.radio(是否包邮, is_postage, 0) .options([ { value: 0, label: 不包邮 }, { value: 1, label: 包邮 }, ]) .control([/* 联动规则 */]) .validate([{ required: true }]), maker.select(产品分类, cate_id, 105) .props({ multiple: true }) .options([ { value: 104, label: 生态蔬菜 }, { value: 105, label: 新鲜水果 }, ]), ];maker 链式 API 的底层实现在 src/core/maker.js它基于form-create/core的creatorFactory批量生成了大量便捷方法包括输入类input、password、url、text、tel、textarea、inputNumber/number、rangeInput选择类select、selectMultiple、selectOne、cascader、autoComplete/auto、treeSelect、treeSelectMultiple、transfer、tagInput/tag日期类datePicker/date、dateRangePicker/dateRange、timePicker/time、timeRangePicker/timeRange其他switch、slider、sliderRange、checkbox、radio、colorPicker/color、upload含image、file、uploadFileOne、uploadImageOne等、frame含frameInputs、frameFiles、frameImages、frameInputOne等、group、tree。这些方法在 types/maker.d.ts 中均有类型声明TypeScript 项目可获得完整智能提示。组件别名映射规则 type 到 TDesign 组件的桥梁JSON 规则中的type并非直接等于 TDesign 组件名而是先经过别名映射。核心文件 src/core/alias.js 中定义了完整映射前缀t即 TDesign 组件前缀规则 type实际组件规则 type实际组件button / icon / slidertButton / tIcon / tSliderinput / textareatInput / tTextareacascader / autoCompletetCascader / tAutoCompleteinputNumber / numbertInputNumbercolorPickertColorPickerrate / rangeInput / tagInputtRate / tRangeInput / tTagInputdatePicker / timePickertDatePicker / tTimePickerselecttSelectdateRangePicker / timeRangePickertDateRangePicker / tTimeRangePickercheckboxtCheckboxGroupswitchtSwitchradiotRadioGroupform / formItem / col / rowtForm / tFormItem / tCol / tRowtree / treeSelect / transfertTree / tTreeSelect / tTransferframefcFrame自定义弹层组件group / arrayfcGroup自定义分组组件object / subFormfcSubForm子表单uploadfcUpload自定义上传组件其中frame、group、upload、subForm四类属于 form-create 自定义组件其实现分别在 components/tdesign/frame/src/component.jsx、components/tdesign/group/src/component.jsx、components/tdesign/upload/src/component.jsx 以及公共子表单组件中由 src/components/index.js 统一注册并附带QuestionCircleOutlined图标组件用于表单标题的提示气泡。除 TDesign 内置组件外form-create 还支持生成任何 Vue 组件和 HTML 标签通过FormCreate.component(name, component)注册自定义组件后即可在规则中以该 name 为 type 使用examples/main.js 中注册了wangEditor富文本与testSlot插槽示例组件。表单配置项option与默认值规则之外option控制表单整体行为。默认值定义在 src/core/config.js{ form: { layout: vertical, // 布局vertical / inline / horizontal labelAlign: right, // 标签对齐方式 labelWidth: 125px, // 标签宽度 }, row: { show: true, // 是否启用栅格行 gutter: 0, // 栅格间距 }, submitBtn: { theme: primary, // TDesign 按钮主题 loading: false, disabled: false, innerText: , // 按钮文字为空时取多语言默认 提交 show: true, // 是否显示提交按钮 col: undefined, // 按钮所在栅格列配置 click: undefined, // 自定义点击回调未设置时执行 fApi.submit() }, resetBtn: { theme: default, loading: false, disabled: false, innerText: , show: false, // 默认不显示重置按钮 col: undefined, click: undefined, // 未设置时执行 fApi.resetFields() }, }submitBtn/resetBtn还支持简写为布尔值true/false控制显隐或传入ButtonProps对象。这些 option 在渲染层 src/core/manager.js 的makeFormBtn/makeSubmitBtn/makeResetBtn中消费按钮默认文案来自多语言api.t(submit)/api.t(reset)中文环境即为「提交」「重置」且布局为inline时按钮会直接嵌入行内。除按钮外option还支持col列宽、wrap表单项包裹、info标题提示、title标题等结构其类型定义见 types/config.d.ts例如col支持span与labelWidthinfo支持type: popup | tooltip、icon、align: left | right等。表单操作 API数据、验证与提交通过v-model:api拿到表单实例后TDesign 包在核心 API 之上扩展了丰富的操作方法实现在 src/core/api.js。以下方法在 examples/App.vue 中均有直接演示API说明fapi.formData()获取当前表单数据对象fapi.fields()获取所有字段信息fapi.getRule(field)获取指定字段的完整规则fapi.append(rule, field)/fapi.prepend(rule, field)在指定字段后/前追加规则fapi.removeField(field)删除字段fapi.hidden(flag, field)/fapi.disabled(flag, field)隐藏/禁用字段不传 field 则作用于全表单fapi.setValue(field, value)/fapi.getValue(field)设置/获取字段值fapi.exec(field, method)调用组件实例方法如focusfapi.resetFields(fields?)重置表单/指定字段fapi.submit(success, fail)先验证再收集数据并提交返回 Promisefapi.validate(callback?)校验整个表单含子表单返回 Promisefapi.validateField(field, callback?)校验单个字段fapi.validateFields(fields, callback?)批量校验多个字段fapi.clearValidateState(fields?)清空验证状态fapi.submitBtnProps(props)/fapi.resetBtnProps(props)动态修改按钮属性fapi.btn.loading(true)/fapi.btn.show(false)快捷控制提交按钮fapi.updateOptions({form: {layout: inline}})动态更新表单配置如切换行内模式fapi.reload()/fapi.refresh()重载/刷新表单fapi.hideForm(flag)隐藏整个表单fapi.toJson()导出当前表单的 JSON 规则串从实现细节看validate()会收集当前表单及所有非作用域子表单的校验任务并合并为 Promise 执行校验失败时会触发validate-fail事件。submit()默认在提交前执行validate()可通过option.validateOnSubmit: false关闭验证通过后调用successFn、option.onSubmit回调并派发submit事件最后 resolve 出表单数据。按钮的loading/disabled/show状态变化均通过submitBtnProps/resetBtnProps合并回option并触发refreshOptions实现响应式更新。高级能力子表单、分组与联动原文档特别提到了三类高阶用法TDesign 包均完整支持。group 分组批量添加type: group别名array用于可增删的表单集合例如多行商品明细。规则中通过props.rule声明子项模板props.min/props.max限制条目数量并可对整体加validate如{required: true, min: 3, type: array, message: 最少增加3项, trigger: change}。其渲染组件 components/tdesign/group/src/component.jsx 支持sortBtn排序按钮、type: card卡片样式、title模板{index}占位以及onBeforeAdd/onBeforeRemove拦截钩子。object 子表单type: object别名subForm表示一个嵌套的对象字段内部props.rule为该对象的字段定义表单数据以对象形式存入父字段适合地址、联系信息等结构化数据。子表单同样具备独立的验证与数据收集能力这也是validate()会递归校验子表单的原因。control 联动在规则中通过control配置项实现字段间联动当某字段值等于指定 value 时动态添加/移除/更新其他规则。示例来自 examples/rule.jsmaker.radio(是否包邮, is_postage, 0) .control([ { value: 1, // 当选择「包邮」时 rule: [ maker.number(满额包邮, postage_money, 0) .effect({ required: true }) // 该字段变为必填 ] } ]);此外组件之间还可通过inject/link/update实现值注入联动addressEffect见 examples/addressEffect.js演示了如何通过FormCreate.register()注册自定义属性如自动填充省市区数据并提供init、loaded、watch、value、control、deleted、mounted等生命周期钩子。内置扩展组件frame 与 uploadframe弹层选择type: frame以 iframe 弹层方式选择资源props支持type: input | image | file、srciframe 地址、maxLength、width/height、modalTitle、okBtnText/closeBtnText等。其实现向 iframe 注入form_create_helper对象提供set/get/close/onOk/onClose方法实现父子页面通信components/tdesign/frame/src/component.jsx。upload文件上传type: upload基于 TDesign 的t-upload封装规则中通过props.action指定上传地址、props.onSuccess处理返回、props.max限制数量、props.uploadType: image | file区分类型单文件场景max: 1下toValue会自动把数组收敛为单个值components/tdesign/upload/src/component.jsx。本地开发与构建仓库为 monorepopnpm workspaceTDesign 包提供了独立的开发与构建脚本见 packages/tdesign/package.jsonpnpm dev:td启动本地开发服务器配置见 vite.dev.config.mjs端口 8080运行examples目录下的演示页面pnpm build:lib清理并构建发布产物dist/form-create.min.js与dist/form-create.esm.js。开发服务器会通过process.env.UI tdesign注入 UI 标识并将 TDesign 演示所需的tdesign-vue-next、dayjs加入依赖预构建。示例页面 examples/App.vue 提供了覆盖全部 API 与组件类型的交互式操作面板获取配置、增删字段、校验、提交、JSON 生成等是快速上手该包的最佳参考。TypeScript 类型支持form-create/tdesign自带完整类型声明typings指向 types/index.d.ts在 core 提供的泛型基础上扩展了 TDesign 专属类型OptionAttrs将 TDesign 的FormProps、ButtonProps、RowProps、ColProps、FormItemProps、PopupProps、TooltipProps直接并入 option 类型types/config.d.tsMaker列出全部 maker 方法名的枚举类型types/maker.d.tsRule、Api、Control、Effect等泛型类型均可用。这使得 Vue3 TypeScript 项目在书写规则与调用 API 时可以获得准确的类型约束与编辑器补全。小结form-create/tdesign是 form-create 低代码表单方案在 TDesign 生态中的落地包安装时按分支next/super/latest选择对应 Vue 版本通过 JSON 规则或 maker 链式 API 描述表单借助组件别名映射直接复用tdesign-vue-next的 20 余个表单组件同时以group、object、frame、upload四个扩展组件覆盖批量添加、嵌套子表单、弹层选择与文件上传场景并通过control、inject、自定义属性实现复杂联动。其工程实现以 src/core/index.js 为安装入口内部通过alias、manager、parser、maker、provider分层协作任何 TDesign 组件都可被注册进规则体系适合作为 Vue3 TDesign 业务系统的统一表单基础设施。该包基于 MIT 协议开源见 packages/tdesign/LICENSE可自由用于商业项目。赞分享低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载相关推荐form-create 低代码动态表单JSON 驱动 Vue 表单渲染的多框架实战指南form create 低代码动态表单JSON 驱动 Vue 表单渲染的多框架实战指南 本文以 form create 开源仓库 README.md http低代码前端UI组件TDesign小程序RadioGroup组件在Form表单中的数据获取问题解析TDesign小程序RadioGroup组件在Form表单中的数据获取问题解析 问题背景 在使用TDesign小程序组件库tdesign miniprogra前端UI组件小程序设计系统移动开发TDesign 小程序组件库tdesign-miniprogram安装、使用与源码工程化全解TDesign 小程序组件库tdesign miniprogram安装、使用与源码工程化全解 本文基于 TDesign 小程序组件库tdesign mi前端UI组件小程序设计系统移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/15 20:24:32 · 阅读 1.2k form-create 的 TDesign 版低代码表单组件：@form-create/tdesign 安装、配置与源码解析
低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载本篇文章围绕开源项目 form-create 中的 TDesign 适配包form-create/tdesign展开它让开发者通过 JSON 规则即可生成基于 TDesigntdesign-vue-next的 Vue3 动态表单并自带数据收集、验证、提交、联动与子表单能力。读完本文你将掌握该包的版本分支选择与安装方式、JSON 规则与 maker 链式生成两种建模方式、表单与按钮的默认配置项以及从入口到渲染的源码级工作原理可直接在政务、OA、ERP 等 Vue3 TDesign 项目中落地使用。包定位与核心特性根据 packages/tdesign/README.md 的定义FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件而form-create/tdesign正是其在 TDesign 体系下的实现版本Vue3对应 npm 上的next分支。其官方列出如下特点使用 JSON 数据生成表单支持扩展可生成任何 Vue 组件和 HTML 标签支持 8 个 UI 框架Element、Ant Design Vue、Arco、Naive、TDesign、iView、View Design、Vant 等支持组件之间联动control配置项提供丰富的表单操作 API支持子表单object/subForm和分组group/array高性能适配移动端支持多语言。从仓库结构看该包位于 packages/tdesignmonorepo 中同时存在 element-ui、ant-design-vue、arco-design、naive-ui、tiny-vue、vant 等同类适配包form-create/tdesign是其中专门面向腾讯 TDesign 组件库的一版。支持的 UI 框架与包生态原文档中的「包说明」表完整列出了 form-create 家族的各版本包及其适用框架包名说明form-create/element-uielement-plus 版本form-create/ant-design-vueant-design-vue 版本form-create/arco-designarco-design 版本form-create/naive-uinaive-ui 版本form-create/tdesigntdesign 版本form-create/iviewiview 版本form-create/view-designview-design 版本form-create/vantvant 版本移动端form-create/designer可视化表单设计器form-create/vant-designer移动端表单设计器从 packages/tdesign/package.json 可以看到form-create/tdesign的运行时依赖集中在 form-create 内部包与核心库form-create/core表单引擎核心form-create/utils工具函数库form-create/component-subform子表单组件form-create/component-tdesign-frameTDesign 版 frame弹层选择组件form-create/component-tdesign-groupTDesign 版 group批量添加组件form-create/component-tdesign-uploadTDesign 版 upload上传组件同时其peerDependencies声明了vue: ^3.5.12开发依赖中则使用tdesign-vue-next: ^1.10.7作为底层组件库版本号package.json 中为3.3.4与 Vue3 分支保持同步。版本分支与安装方式原文档明确指出仓库按分支管理版本这点在使用时最容易踩坑latestVue 2.0 版本分支superVue 2.7 版本分支该版本功能和 next 分支功能一致nextVue 3.0 版本分支。因此安装form-create/tdesign时必须显式指定分支标签否则默认拿到的是 Vue2 的 latest 版本。例如安装 Vue 2.7 版本的form-create/tdesignnpm install form-create/tdesignsuper安装 Vue 3 版本的form-create/tdesignnpm install form-create/tdesignnext在使用 Vue3 项目时务必安装next标签版本Vue2.7 项目则安装super标签版本两者功能对齐便于平滑升级。快速开始引入与注册以 Vue3 项目为例安装form-create/tdesignnext后可通过两种方式接入 TDesign 组件。方式一按需自动注册推荐form-create/tdesign自带的 auto-import.js 会从tdesign-vue-next中按需导入 Form、FormItem、Row、Col、Input、Button、Cascader、AutoComplete、CheckboxGroup、RadioGroup、ColorPicker、DatePicker、DateRangePicker、InputNumber、RangeInput、Select、Slider、Switch、TagInput、TimePicker、TimeRangePicker、TreeSelect、Upload、Tree、Dialog、Popup、Transfer 等 20 余个组件并注册到当前应用实例同时引入 TDesign 样式。在入口文件中这样使用参考 examples/main.jsimport { createApp } from vue; import install from form-create/tdesign/auto-import; import FormCreate from form-create/tdesign; import App from ./App.vue; const app createApp(App); FormCreate.use(install); // 按需注册 TDesign 组件与样式 app.use(FormCreate); // 安装 FormCreate 插件 app.mount(#app);方式二全量引入 TDesign也可以全量引入tdesign-vue-next插件再安装 FormCreate两种方式最终都会让表单引擎拿到所需的t-form、t-input等组件。在组件模板中通过form-create组件绑定规则、选项与数据即可渲染表单参考 examples/App.vuetemplate form-create :rulerule v-model:apifapi :optionoption v-modelformData changechange / /template其中rule是表单生成规则数组JSON 结构option是表单整体配置布局、按钮等formData是表单数据对象v-model 双向绑定fapi拿到表单实例 API 后可动态操作表单。JSON 驱动两种规则建模方式TDesign 包同时支持纯 JSON 规则与maker 链式生成两种建模方式二者最终都会归一为同一套规则结构。方式一纯 JSON 规则直接给出规则数组即可每个字段描述一个组件参考 examples/jsonRule.jsconst rule [ { type: input, // 组件类型对应 TDesign 组件别名 title: 商品名称, field: goods_name, // 字段名对应 formData 中的 key value: iphone, props: { placeholder: 请输入商品名称, disabled: false, }, validate: [ { required: true, message: 请输入商品名称, trigger: blur } ] }, { type: radio, title: 是否包邮, field: is_postage, value: 0, options: [ { value: 0, label: 不包邮, disabled: false }, { value: 1, label: 包邮, disabled: false }, { value: 2, label: 未知, disabled: true }, ] }, { type: select, field: cate_id, title: 产品分类, value: [104, 105], props: { multiple: true }, options: [ { value: 104, label: 生态蔬菜 }, { value: 105, label: 新鲜水果 }, ] }, ];规则中的type会经过组件别名映射层解析到具体的 TDesign 组件详见下一节props原样透传给该组件validate为校验规则数组options为选项数据。方式二maker 链式生成form-create/tdesign从入口 src/index.js 导出maker对象支持以链式调用生成规则参考 examples/rule.jsimport { maker } from form-create/tdesign; const rule [ maker.hidden(id, 14), maker.input(商品名称, goods_name, iphone) .props({ placeholder: 请输入商品名称, clearable: true, maxlength: 10, }) .validate([ { required: true, message: 请输入商品名称, trigger: change } ]) .style(color:red) .wrap({ style: color:red, class: asdfasdf }) .info(请输入商品名称!!!!!), maker.radio(是否包邮, is_postage, 0) .options([ { value: 0, label: 不包邮 }, { value: 1, label: 包邮 }, ]) .control([/* 联动规则 */]) .validate([{ required: true }]), maker.select(产品分类, cate_id, 105) .props({ multiple: true }) .options([ { value: 104, label: 生态蔬菜 }, { value: 105, label: 新鲜水果 }, ]), ];maker 链式 API 的底层实现在 src/core/maker.js它基于form-create/core的creatorFactory批量生成了大量便捷方法包括输入类input、password、url、text、tel、textarea、inputNumber/number、rangeInput选择类select、selectMultiple、selectOne、cascader、autoComplete/auto、treeSelect、treeSelectMultiple、transfer、tagInput/tag日期类datePicker/date、dateRangePicker/dateRange、timePicker/time、timeRangePicker/timeRange其他switch、slider、sliderRange、checkbox、radio、colorPicker/color、upload含image、file、uploadFileOne、uploadImageOne等、frame含frameInputs、frameFiles、frameImages、frameInputOne等、group、tree。这些方法在 types/maker.d.ts 中均有类型声明TypeScript 项目可获得完整智能提示。组件别名映射规则 type 到 TDesign 组件的桥梁JSON 规则中的type并非直接等于 TDesign 组件名而是先经过别名映射。核心文件 src/core/alias.js 中定义了完整映射前缀t即 TDesign 组件前缀规则 type实际组件规则 type实际组件button / icon / slidertButton / tIcon / tSliderinput / textareatInput / tTextareacascader / autoCompletetCascader / tAutoCompleteinputNumber / numbertInputNumbercolorPickertColorPickerrate / rangeInput / tagInputtRate / tRangeInput / tTagInputdatePicker / timePickertDatePicker / tTimePickerselecttSelectdateRangePicker / timeRangePickertDateRangePicker / tTimeRangePickercheckboxtCheckboxGroupswitchtSwitchradiotRadioGroupform / formItem / col / rowtForm / tFormItem / tCol / tRowtree / treeSelect / transfertTree / tTreeSelect / tTransferframefcFrame自定义弹层组件group / arrayfcGroup自定义分组组件object / subFormfcSubForm子表单uploadfcUpload自定义上传组件其中frame、group、upload、subForm四类属于 form-create 自定义组件其实现分别在 components/tdesign/frame/src/component.jsx、components/tdesign/group/src/component.jsx、components/tdesign/upload/src/component.jsx 以及公共子表单组件中由 src/components/index.js 统一注册并附带QuestionCircleOutlined图标组件用于表单标题的提示气泡。除 TDesign 内置组件外form-create 还支持生成任何 Vue 组件和 HTML 标签通过FormCreate.component(name, component)注册自定义组件后即可在规则中以该 name 为 type 使用examples/main.js 中注册了wangEditor富文本与testSlot插槽示例组件。表单配置项option与默认值规则之外option控制表单整体行为。默认值定义在 src/core/config.js{ form: { layout: vertical, // 布局vertical / inline / horizontal labelAlign: right, // 标签对齐方式 labelWidth: 125px, // 标签宽度 }, row: { show: true, // 是否启用栅格行 gutter: 0, // 栅格间距 }, submitBtn: { theme: primary, // TDesign 按钮主题 loading: false, disabled: false, innerText: , // 按钮文字为空时取多语言默认 提交 show: true, // 是否显示提交按钮 col: undefined, // 按钮所在栅格列配置 click: undefined, // 自定义点击回调未设置时执行 fApi.submit() }, resetBtn: { theme: default, loading: false, disabled: false, innerText: , show: false, // 默认不显示重置按钮 col: undefined, click: undefined, // 未设置时执行 fApi.resetFields() }, }submitBtn/resetBtn还支持简写为布尔值true/false控制显隐或传入ButtonProps对象。这些 option 在渲染层 src/core/manager.js 的makeFormBtn/makeSubmitBtn/makeResetBtn中消费按钮默认文案来自多语言api.t(submit)/api.t(reset)中文环境即为「提交」「重置」且布局为inline时按钮会直接嵌入行内。除按钮外option还支持col列宽、wrap表单项包裹、info标题提示、title标题等结构其类型定义见 types/config.d.ts例如col支持span与labelWidthinfo支持type: popup | tooltip、icon、align: left | right等。表单操作 API数据、验证与提交通过v-model:api拿到表单实例后TDesign 包在核心 API 之上扩展了丰富的操作方法实现在 src/core/api.js。以下方法在 examples/App.vue 中均有直接演示API说明fapi.formData()获取当前表单数据对象fapi.fields()获取所有字段信息fapi.getRule(field)获取指定字段的完整规则fapi.append(rule, field)/fapi.prepend(rule, field)在指定字段后/前追加规则fapi.removeField(field)删除字段fapi.hidden(flag, field)/fapi.disabled(flag, field)隐藏/禁用字段不传 field 则作用于全表单fapi.setValue(field, value)/fapi.getValue(field)设置/获取字段值fapi.exec(field, method)调用组件实例方法如focusfapi.resetFields(fields?)重置表单/指定字段fapi.submit(success, fail)先验证再收集数据并提交返回 Promisefapi.validate(callback?)校验整个表单含子表单返回 Promisefapi.validateField(field, callback?)校验单个字段fapi.validateFields(fields, callback?)批量校验多个字段fapi.clearValidateState(fields?)清空验证状态fapi.submitBtnProps(props)/fapi.resetBtnProps(props)动态修改按钮属性fapi.btn.loading(true)/fapi.btn.show(false)快捷控制提交按钮fapi.updateOptions({form: {layout: inline}})动态更新表单配置如切换行内模式fapi.reload()/fapi.refresh()重载/刷新表单fapi.hideForm(flag)隐藏整个表单fapi.toJson()导出当前表单的 JSON 规则串从实现细节看validate()会收集当前表单及所有非作用域子表单的校验任务并合并为 Promise 执行校验失败时会触发validate-fail事件。submit()默认在提交前执行validate()可通过option.validateOnSubmit: false关闭验证通过后调用successFn、option.onSubmit回调并派发submit事件最后 resolve 出表单数据。按钮的loading/disabled/show状态变化均通过submitBtnProps/resetBtnProps合并回option并触发refreshOptions实现响应式更新。高级能力子表单、分组与联动原文档特别提到了三类高阶用法TDesign 包均完整支持。group 分组批量添加type: group别名array用于可增删的表单集合例如多行商品明细。规则中通过props.rule声明子项模板props.min/props.max限制条目数量并可对整体加validate如{required: true, min: 3, type: array, message: 最少增加3项, trigger: change}。其渲染组件 components/tdesign/group/src/component.jsx 支持sortBtn排序按钮、type: card卡片样式、title模板{index}占位以及onBeforeAdd/onBeforeRemove拦截钩子。object 子表单type: object别名subForm表示一个嵌套的对象字段内部props.rule为该对象的字段定义表单数据以对象形式存入父字段适合地址、联系信息等结构化数据。子表单同样具备独立的验证与数据收集能力这也是validate()会递归校验子表单的原因。control 联动在规则中通过control配置项实现字段间联动当某字段值等于指定 value 时动态添加/移除/更新其他规则。示例来自 examples/rule.jsmaker.radio(是否包邮, is_postage, 0) .control([ { value: 1, // 当选择「包邮」时 rule: [ maker.number(满额包邮, postage_money, 0) .effect({ required: true }) // 该字段变为必填 ] } ]);此外组件之间还可通过inject/link/update实现值注入联动addressEffect见 examples/addressEffect.js演示了如何通过FormCreate.register()注册自定义属性如自动填充省市区数据并提供init、loaded、watch、value、control、deleted、mounted等生命周期钩子。内置扩展组件frame 与 uploadframe弹层选择type: frame以 iframe 弹层方式选择资源props支持type: input | image | file、srciframe 地址、maxLength、width/height、modalTitle、okBtnText/closeBtnText等。其实现向 iframe 注入form_create_helper对象提供set/get/close/onOk/onClose方法实现父子页面通信components/tdesign/frame/src/component.jsx。upload文件上传type: upload基于 TDesign 的t-upload封装规则中通过props.action指定上传地址、props.onSuccess处理返回、props.max限制数量、props.uploadType: image | file区分类型单文件场景max: 1下toValue会自动把数组收敛为单个值components/tdesign/upload/src/component.jsx。本地开发与构建仓库为 monorepopnpm workspaceTDesign 包提供了独立的开发与构建脚本见 packages/tdesign/package.jsonpnpm dev:td启动本地开发服务器配置见 vite.dev.config.mjs端口 8080运行examples目录下的演示页面pnpm build:lib清理并构建发布产物dist/form-create.min.js与dist/form-create.esm.js。开发服务器会通过process.env.UI tdesign注入 UI 标识并将 TDesign 演示所需的tdesign-vue-next、dayjs加入依赖预构建。示例页面 examples/App.vue 提供了覆盖全部 API 与组件类型的交互式操作面板获取配置、增删字段、校验、提交、JSON 生成等是快速上手该包的最佳参考。TypeScript 类型支持form-create/tdesign自带完整类型声明typings指向 types/index.d.ts在 core 提供的泛型基础上扩展了 TDesign 专属类型OptionAttrs将 TDesign 的FormProps、ButtonProps、RowProps、ColProps、FormItemProps、PopupProps、TooltipProps直接并入 option 类型types/config.d.tsMaker列出全部 maker 方法名的枚举类型types/maker.d.tsRule、Api、Control、Effect等泛型类型均可用。这使得 Vue3 TypeScript 项目在书写规则与调用 API 时可以获得准确的类型约束与编辑器补全。小结form-create/tdesign是 form-create 低代码表单方案在 TDesign 生态中的落地包安装时按分支next/super/latest选择对应 Vue 版本通过 JSON 规则或 maker 链式 API 描述表单借助组件别名映射直接复用tdesign-vue-next的 20 余个表单组件同时以group、object、frame、upload四个扩展组件覆盖批量添加、嵌套子表单、弹层选择与文件上传场景并通过control、inject、自定义属性实现复杂联动。其工程实现以 src/core/index.js 为安装入口内部通过alias、manager、parser、maker、provider分层协作任何 TDesign 组件都可被注册进规则体系适合作为 Vue3 TDesign 业务系统的统一表单基础设施。该包基于 MIT 协议开源见 packages/tdesign/LICENSE可自由用于商业项目。赞分享低代码前端UI组件【免费下载链接】form-create:fire::fire::fire: 强大的低代码动态表单组件通过 JSON 数据驱动表单渲染适配移动端支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址https://gitcode.com/gh_mirrors/fo/form-create点击查看免费下载相关推荐form-create 低代码动态表单JSON 驱动 Vue 表单渲染的多框架实战指南form create 低代码动态表单JSON 驱动 Vue 表单渲染的多框架实战指南 本文以 form create 开源仓库 README.md http低代码前端UI组件TDesign小程序RadioGroup组件在Form表单中的数据获取问题解析TDesign小程序RadioGroup组件在Form表单中的数据获取问题解析 问题背景 在使用TDesign小程序组件库tdesign miniprogra前端UI组件小程序设计系统移动开发TDesign 小程序组件库tdesign-miniprogram安装、使用与源码工程化全解TDesign 小程序组件库tdesign miniprogram安装、使用与源码工程化全解 本文基于 TDesign 小程序组件库tdesign mi前端UI组件小程序设计系统移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考