{"id":18742070,"url":"https://github.com/0604hx/grid-form","last_synced_at":"2025-10-17T14:38:52.183Z","repository":{"id":65593671,"uuid":"594671654","full_name":"0604hx/grid-form","owner":"0604hx","description":"格子表单：基于 GRID 布局的简单表单工具（包含可视化设计器、渲染器），默认组件库为 Naive UI，同时支持 element-plus、vant4、Varlet3 渲染","archived":false,"fork":false,"pushed_at":"2024-11-11T01:08:10.000Z","size":3632,"stargazers_count":71,"open_issues_count":3,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T08:36:01.320Z","etag":null,"topics":["element-plus","form-designer","form-render","low-code","naive-ui","pnpm","vant4","varlet-ui","visualization","vite","vue3"],"latest_commit_sha":null,"homepage":"https://0604hx.github.io/grid-form/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0604hx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-29T09:24:19.000Z","updated_at":"2025-03-26T14:55:44.000Z","dependencies_parsed_at":"2024-03-15T09:41:51.417Z","dependency_job_id":"a361ae3d-fd01-471e-879a-c18192488640","html_url":"https://github.com/0604hx/grid-form","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.07547169811320753,"last_synced_commit":"e90b60545e49faa7c9dca97f2a000b1796bbb7f2"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0604hx%2Fgrid-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0604hx%2Fgrid-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0604hx%2Fgrid-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0604hx%2Fgrid-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0604hx","download_url":"https://codeload.github.com/0604hx/grid-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427005,"owners_count":20937200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-plus","form-designer","form-render","low-code","naive-ui","pnpm","vant4","varlet-ui","visualization","vite","vue3"],"created_at":"2024-11-07T16:05:56.003Z","updated_at":"2025-10-17T14:38:52.164Z","avatar_url":"https://github.com/0604hx.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\u003ch1\u003e 格子表单 / GRID-FORM \u003c/h1\u003e\n\n![Language](https://img.shields.io/github/languages/top/0604hx/grid-form?logo=javascript\u0026color=blue)\n![License](https://img.shields.io/badge/License-MIT-green)\n![LastCommit](https://img.shields.io/github/last-commit/0604hx/grid-form?color=blue\u0026logo=github)\n\n\u003c/div\u003e\n\n基于 GRID 布局的简单表单工具（包含可视化设计器、渲染器），默认组件库为 [Naive UI](https://www.naiveui.com)。\n\n此工具仅适用于布局简单纯粹的表单场景 😄\n\n开源地址：👉 [GitCode（中国大陆友好⚡）](https://gitcode.com/ssrc0604hx/grid-form)、[Github](https://github.com/0604hx/grid-form) 👈\n\n在线文档及演示：👉 [Github Pages](https://0604hx.github.io/grid-form/) 、[个人站点（中国大陆友好⚡）](https://demo.0604hx.top/grid-form/) 👈\n\n---\n\n包名|说明|进度|版本\n-|-|-|-\ncommon|通用工具|✅|![common](https://img.shields.io/npm/v/%40grid-form%2Fcommon)\ndesigner|可视化设计器（基于 Naive UI）|✅|![designer](https://img.shields.io/npm/v/%40grid-form%2Fdesigner)\nrender-naive|基于[Naive UI](https://www.naiveui.com)实现的渲染器|✅|![render-naive](https://img.shields.io/npm/v/%40grid-form%2Frender-naive?color=5fbc21)\nrender-element|基于[Element Plus](https://element-plus.org/zh-CN/)实现的渲染器|✅|![render-element](https://img.shields.io/npm/v/%40grid-form%2Frender-element?color=49a2fe)\nrender-arco|基于[Arco Design](https://arco.design/vue)实现的渲染器|🏗️|![render-arco](https://img.shields.io/npm/v/%40grid-form%2Frender-arco?color=3491fa)\nrender-vant|基于[Vant4](https://vant-ui.github.io)实现的渲染器|✅|![render-vant](https://img.shields.io/npm/v/%40grid-form%2Frender-vant?color=36d7b7)\nrender-varlet|基于[varlet](https://github.com/varletjs/varlet)实现的渲染器|✅|![render-vant](https://img.shields.io/npm/v/%40grid-form%2Frender-varlet?color=6750a4)\nrender-tree|简单树形结构渲染器（Web Components）|✅|![render-tree](https://img.shields.io/npm/v/%40grid-form%2Frender-varlet?color=gray)\n\n**说明：** Web Components 渲染器可以在任何 web 项目中使用（不限于 vue 环境）😄\n\n---\n\n**相关博文**\n\n* [基于 VUE3 可视化低代码表单设计器](https://blog.csdn.net/ssrc0604hx/article/details/128825163)\n* [嵌套子表单与自定义脚本交互](https://blog.csdn.net/ssrc0604hx/article/details/135828101)\n* [文档网站搭建（VitePress）与部署（Github Pages）](https://blog.csdn.net/ssrc0604hx/article/details/135970166)\n* [必填项检验 BUG 修复实录](https://blog.csdn.net/ssrc0604hx/article/details/136617743)\n\n\n**更新日志**\n\n详见：[更新日志/changelog](https://0604hx.github.io/grid-form/guide/changelog)\n\n---\n\n## 1. 总览 / OVERVIEW\n\n![框架](docs/screenshot/overview.png)\n\n更多截图请看 [screenshot](docs/screenshot)\n\n## 2. 开始使用 / GETTING STARTED\n\n### 2.1 仅使用渲染器\n\u003e 详细文档见：[render.md](packages/site/guide/render.md)\n\n1. 安装依赖\n\n```shell\nnpm i -S @grid-form/render-naive\n```\n\n2. 使用渲染器组件\n\n```html\n\u003cFormRender :renders=\"RenderFuncs\" :form=\"form\" debug\n    @submit=\"onSubmit\" @failed=\"onFailed\" /\u003e\n```\n\n```javascript\nimport { FormRender, RenderFuncs } from \"@grid-form/render-naive\"\n\n// 如需扩展 RenderFuncs 请自行扩写\n// 表单对象通常来自后端，详细数据结构请查看 packages/example/src/views/渲染器.vue\nlet form = reactive({})\n```\n\n#### 2.1.1 表单项默认值\n\u003e 我们可以通过`${xxxx}`的格式设置（注意，前后不能有其他字符）表单项的默认值，渲染过程中会将占位符替换为计算后的值\n\n```javascript\n//默认使用的计算函数\nimport { formValueProvider } from \"@grid-form/common\"\n\nimport dayjs from 'dayjs'\n\n/*\n扩展默认的表单默认值计算器\n支持 Promise （未作异常捕获，慎用）\n*/\nformValueProvider[\"${date}\"]        = ()=\u003e dayjs(new Date()).format(\"YYYY-MM-DD\")\nformValueProvider[\"${username}\"]    = ()=\u003e \"集成显卡\"\n\n//详见 packages\\example\\src\\views\\渲染器.vue\n```\n\n#### 2.1.2 内置组件\n\u003e 业务系统可自行扩展自定义组件\n\n组件名称|说明|Naive UI|Element Plus|Vant4|Varlet\n-|-|-|-|-|-\n文本输入|支持TEXTAREA|✅|✅|✅|✅\n数值输入|仅限数字|✅|✅|✅|✅\n动态标签|标签组输入（Array）|✅|✅||\n`按钮`|可用于交互操作|✅|✅|✅|✅\n日期选择||✅|✅|✅|✅\n下拉选择（Select）|支持多选|✅|✅|✅|✅\n单选框（Radio）||✅|✅|✅|✅\n开关（Switch）|布尔值|✅|✅|✅|✅\n多选框（Checkbox）||✅|✅|✅|✅\n星级评分（Rate）|数值|✅|✅|✅|✅\n颜色选择器||✅|✅||\n文件上传|按指定格式读取内容|✅|✅|✅|✅\n静态文本|支持HTML|✅|✅|✅|✅\n信息框|标题+正文，支持HTML|✅|✅|✅|✅\n分割线||✅|✅|✅|✅\n`图片展示`||✅|✅|✅|✅\n静态表格|简单的二维数据展示表格|✅|✅|✅|✅\n子容器（Card）|嵌套容器|✅|✅|✅|✅\n\n注意：上述组件`特殊标注`则表示支持自定义脚本\n\n### 2.2 使用设计器\n\u003e 设计器依赖 render-naive\n\n```shell\nnpm i -S @grid-form/designer @grid-form/render-naive\n```\n\n```html\n\u003cDesigner :renders=\"RenderFuncs\" :components=\"Components\" :form=\"form\" \n    debug show-footer style=\"height: 100%;\" /\u003e\n```\n\n```javascript\nimport { reactive } from 'vue'\nimport { Designer, Components } from \"@grid-form/designer\"\nimport { RenderFuncs } from \"@grid-form/render-naive\"\nimport { createForm } from \"@grid-form/common\"\n\n// 如需扩展 RenderFuncs、Components ，请自行扩写\nlet form = reactive(createForm())\n```\n\n![设计器](docs/screenshot/designer.png)\n\n## 3. 数据结构 / DATA STRUCTURE\n\n详见：[data-structure.md](packages/site/guide/data-structure.md)\n\n## 4. 开发 / DEVELOPMENT\n\u003e 本项目采用 `pnpm` 进行管理，请确保相应环境已安装\n\n```shell\n# 拉取最新代码\ngit clone https://github.com/0604hx/grid-form\n\n# 安装依赖\npnpm i\n# 如果网络卡顿，可以使用镜像\npnpm i --registry https://registry.npmmirror.com/\n\n# 运行示例（基于 VitePress）\npnpm site\n\n# 执行成功后，浏览器访问 http://localhost:8080 即可访问首页\n# 即可体验可视化设计器以及各个组件库对应的渲染效果\n```\n\n## 5. 附录 / ABOUT\n\n### 5.1 说明\n\n1. 此组件仅为个人学习\n2. LOGO 来自[阿里巴巴矢量图标库](https://www.iconfont.cn/)\n\n### 5.2 主流选型\n\u003e 这里列出可二次开发的, 同时具备表单渲染、表单设计的工具（截止至 2022年底）\n\n方案 | 框架 | UI库 | 备注\n---------|----------|---------|---------\n[formilyjs](https://formilyjs.org)|React、Vue|AntD、Element、Vant等主流|`校验`、`事件交互`阿里巴巴开源的表单设计工具体系，能做到一份表单设计多端适配；但是对 **vue3** 支持不完备（设计器得自己做）\n[FormMaking](https://form.making.link/#/zh-CN/)|VUE|AntD、Element|`校验`、`事件交互`操作良好，需要高级版本才支持 **vue3**\n[form-generator](https://github.com/JakHuang/form-generator)|VUE|Element|`校验` 操作良好，预览不友好（不够直接爽快），目前不支持**vue3**\n[form-create](http://form-create.com/v3/guide/)|VUE|iView、AntD、Element、Naive UI|`校验`操作良好，支持多个 UI 框架，对 **vue 2/3** 均支持，无设计器\n[VForm](https://www.vform666.com/document3.html)|VUE|Element|`校验`、`事件交互` 操作良好，开源版不支持**数据源**、**子表单**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0604hx%2Fgrid-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0604hx%2Fgrid-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0604hx%2Fgrid-form/lists"}