{"id":13750316,"url":"https://github.com/dream2023/vue-ele-form","last_synced_at":"2025-04-11T23:16:08.540Z","repository":{"id":47221820,"uuid":"195607384","full_name":"dream2023/vue-ele-form","owner":"dream2023","description":"基于element-ui的数据驱动表单组件","archived":false,"fork":false,"pushed_at":"2021-10-23T00:55:55.000Z","size":20789,"stargazers_count":876,"open_issues_count":15,"forks_count":157,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-03T19:11:28.347Z","etag":null,"topics":["element","element-form","element-ui","element-ui-form","form-builder","vue-ele-form","vue-form","vue-form-generator"],"latest_commit_sha":null,"homepage":"https://dream2023.gitee.io/vue-ele-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/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-07T03:53:22.000Z","updated_at":"2025-03-23T20:57:45.000Z","dependencies_parsed_at":"2022-08-03T00:01:34.303Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-ele-form","commit_stats":null,"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-ele-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055309,"owners_count":21040151,"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","element-form","element-ui","element-ui-form","form-builder","vue-ele-form","vue-form","vue-form-generator"],"created_at":"2024-08-03T08:00:27.844Z","updated_at":"2025-04-11T23:16:08.512Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","技术方案","Components \u0026 Libraries","UI Components"],"sub_categories":["UI Components","Form"],"readme":"# vue-ele-form | 基于 element-ui 的数据驱动表单组件\n\n[![MIT Licence](https://img.shields.io/npm/l/vue-ele-form.svg)](https://img.shields.io/apm/l/vue-ele-form.svg)\n[![npm](https://img.shields.io/npm/v/vue-ele-form.svg)](https://www.npmjs.com/package/vue-ele-form)\n[![download](https://img.shields.io/npm/dt/vue-ele-form)](https://npmcharts.com/compare/vue-ele-form?minimal=true)\n\n## 维护说明\n\n项目由于架构方面的问题，**本人不再维护**，也不推荐大家使用，但是如果你已经在用了，并且发现了问题，可以通过 PR 方式提交改善，我也会帮忙发布 npm 版本。\n\n\n## 说明\n\nvue-ele-form 是基于 [element-ui form](https://element.eleme.cn/#/zh-CN/component/form) 的二次封装, 主要特点:\n\n- 内置 20 多种[表单类型](https://www.yuque.com/chaojie-vjiel/vbwzgu/kz163g), 包括选`单选`、`多选`、`标签`、`级联选择器`等;\n- 拥有`上传图片增强`, `上传视频增强`, `上传文件增强`,`树形下拉选择框`, `富文本`，`表格编辑器`, `动态表单`, `markdown`, `地图`, `代码编辑器`, `json 编辑器`等丰富的[第三方扩展](https://www.yuque.com/chaojie-vjiel/vbwzgu/inlpxy)，满足你的更多需求;\n- 配备[可视化生成表单工具](https://github.com/dream2023/f-render);\n- 内置[表单校检](https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7#GLim1);\n- [表单布局](https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#uuQkg) 和 [响应式表单](https://www.yuque.com/chaojie-vjiel/vbwzgu/yadlgw);\n- [表单分组](https://www.yuque.com/chaojie-vjiel/vbwzgu/ue72yy);\n- [联动](https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav)显示/隐藏、启用/禁用、重新获取 options 值\n- 可以通过[插槽](https://www.yuque.com/chaojie-vjiel/vbwzgu/cmerhn)自定义表单项;\n- 支持[国际化](https://www.yuque.com/chaojie-vjiel/vbwzgu/gh11wg);\n- 一键 Mock[模拟数据](https://www.yuque.com/chaojie-vjiel/vbwzgu/ugbzgz);\n\n而上面所说的一切只需要一行 html 和 数据即可实现, 即保证了质量, 又使得开发速度仿佛坐上 🚀!\n\n## 图片演示\n\n[![vue-ele-form演示图](https://s2.ax1x.com/2020/01/31/13x2If.gif)](https://dream2023.github.io/vue-ele-form/)\n\n## DEMO\n\n[https://dream2023.github.io/vue-ele-form/](https://dream2023.github.io/vue-ele-form/)\n\n## 文档\n\n[https://www.yuque.com/chaojie-vjiel/vbwzgu](https://www.yuque.com/chaojie-vjiel/vbwzgu)\n\n## 可视化生成表单\n\n[![f-render 演示图](https://s1.ax1x.com/2020/08/23/d0T976.gif)](https://dream2023.gitee.io/f-render/)\n\n项目地址: [https://github.com/dream2023/f-render](https://github.com/dream2023/f-render)\n\n## 安装\n\n```bash\nnpm install vue-ele-form --save # yarn add vue-ele-form\n```\n\n## 使用\n\n```js\nimport EleForm from 'vue-ele-form'\n\nVue.use(EleForm)\n```\n\n## 生态\n\n## 生态\n\n| Project                                                                                   | Status                                                                                                                         | Description                                |\n| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |\n| [vue-ele-form](https://github.com/dream2023/vue-ele-form)                                 | [![npm](https://img.shields.io/npm/v/vue-ele-form)](https://github.com/dream2023/vue-ele-form)                                 | 接基于 ElementUI 的数据驱动表单            |\n| [f-render](https://github.com/dream2023/f-render)                                         | [![npm](https://img.shields.io/npm/v/f-render)](https://github.com/dream2023/f-render)                                         | 专为 vue-ele-form 开发的可视化表单设计工具 |\n| [vue-ele-form-json-editor](https://github.com/dream2023/vue-ele-form-json-editor)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-json-editor)](https://github.com/dream2023/vue-ele-form-json-editor)         | JSON 编辑器(vue-ele-form 扩展)             |\n| [vue-ele-form-upload-file](https://github.com/dream2023/vue-ele-form-upload-file)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-upload-file)](https://github.com/dream2023/vue-ele-form-upload-file)         | upload 文件上传组件(vue-ele-form 扩展)     |\n| [vue-ele-form-image-uploader](https://github.com/dream2023/vue-ele-form-image-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-image-uploader)](https://github.com/dream2023/vue-ele-form-image-uploader)   | 上传图片增强组件(vue-ele-form 扩展)        |\n| [vue-ele-form-tree-select](https://github.com/dream2023/vue-ele-form-tree-select)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-tree-select)](https://github.com/dream2023/vue-ele-form-tree-select)         | 树形选择框组件(vue-ele-form 扩展)          |\n| [vue-ele-form-table-editor](https://github.com/dream2023/vue-ele-form-table-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-table-editor)](https://github.com/dream2023/vue-ele-form-table-editor)       | 表格编辑器(vue-ele-form 扩展)              |\n| [vue-ele-form-dynamic](https://github.com/dream2023/vue-ele-form-dynamic)                 | [![npm](https://img.shields.io/npm/v/vue-ele-form-dynamic)](https://github.com/dream2023/vue-ele-form-dynamic)                 | 动态表单(vue-ele-form 扩展)                |\n| [vue-ele-form-video-uploader](https://github.com/dream2023/vue-ele-form-video-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-video-uploader)](https://github.com/dream2023/vue-ele-form-video-uploader)   | 上传视频增强组件(vue-ele-form 扩展)        |\n| [vue-ele-form-quill-editor](https://github.com/dream2023/vue-ele-form-quill-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-quill-editor)](https://github.com/dream2023/vue-ele-form-quill-editor)       | 富文本编辑器(vue-ele-form 扩展)            |\n| [vue-ele-form-markdown-editor](https://github.com/dream2023/vue-ele-form-markdown-editor) | [![npm](https://img.shields.io/npm/v/vue-ele-form-markdown-editor)](https://github.com/dream2023/vue-ele-form-markdown-editor) | markdown 编辑器(vue-ele-form 扩展)         |\n| [vue-ele-form-bmap](https://github.com/dream2023/vue-ele-form-bmap)                       | [![npm](https://img.shields.io/npm/v/vue-ele-form-bmap)](https://github.com/dream2023/vue-ele-form-bmap)                       | 百度地图组件(vue-ele-form 扩展)            |\n| [vue-ele-form-codemirror](https://github.com/dream2023/vue-ele-form-codemirror)           | [![npm](https://img.shields.io/npm/v/vue-ele-form-codemirror)](https://github.com/dream2023/vue-ele-form-codemirror)           | 代码编辑器(vue-ele-form-gallery 扩展)      |\n| [vue-ele-form-gallery](https://github.com/dream2023/vue-ele-form-gallery)                 | [![npm](https://img.shields.io/npm/v/vue-ele-form-gallery)](https://github.com/dream2023/vue-ele-form-gallery)                 | 图片/视频展示组件(vue-ele-form 扩展)       |\n| [vue-ele-form-data-editor](https://github.com/dream2023/vue-ele-form-data-editor)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-data-editor)](https://github.com/dream2023/vue-ele-form-data-editor)         | 轻量级数据编辑器(vue-ele-form 扩展)        |\n\n\u003ch2 align=\"center\"\u003e特别感谢赞助者\u003c/h2\u003e\n\u003c!--platinum start--\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"http://www.youkefu.cn\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://portrait.gitee.com/uploads/avatars/user/400/1200081_ukewo_admin_1578945969.png\"\u003e\n          \u003cdiv\u003e优客服\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"http://www.sagedoit.com/\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://i.loli.net/2020/02/10/capiUTAPgCWvLkM.png\"\u003e\n          \u003cdiv\u003e圣捷远创\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"https://github.com/DamonNie\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://avatars2.githubusercontent.com/u/16314117?s=460\u0026v=4\"\u003e\n          \u003cdiv\u003edamonnie\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"https://github.com/xzusoft\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://avatars3.githubusercontent.com/u/12249515?s=460\u0026v=4\"\u003e\n          \u003cdiv\u003exzusoft\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"https://gitee.com/ahiris_seeenter\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://portrait.gitee.com/uploads/avatars/user/751/2253945_ahiris_seeenter_1597720904.png!avatar200\"\u003e\n          \u003cdiv\u003eseeenter\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"middle\"\u003e\n        \u003ca href=\"\" target=\"_blank\"\u003e\n          \u003cimg width=\"200px\" src=\"https://s1.ax1x.com/2020/08/19/d1XV9x.jpg\"\u003e\n          \u003cdiv\u003e高亢\u003c/div\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\u003ctr\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003c!--platinum end--\u003e\n\n\u003e 如果您觉得对您有所帮助, 可以请作者喝一杯咖啡, 让开源走的更远, 点击进入[码云赞赏](https://gitee.com/dream2023/f-render)一下, 并加入下面交流群, 将链接发送给我\n\n## 贡献指北\n\n- 如果发现了 BUG, 不要着急, 先去 [issues](https://github.com/dream2023/vue-ele-form/issues) 里搜索一下, 如果没有找到类似的解决方案, 可以提一个 BUG, 如果知道怎么修复它就更好了, 请参考 [贡献指北](./CONTRIBUTING.md)文档;\n- 如果有新功能 或者 建议, 也需要先在 [issues](https://github.com/dream2023/vue-ele-form/issues) 中提出来, 如果能用代码实现, 就更好了, 请参考 [贡献指北](./CONTRIBUTING.md)文档;\n- 如果想贡献代码, 可以在[开发规划](https://github.com/dream2023/vue-ele-form/projects)中找一个未完成的功能, 进行完善, 请参考 [贡献指北](./CONTRIBUTING.md) 文档。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-ele-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-form/lists"}