{"id":19057422,"url":"https://github.com/femessage/el-form-renderer","last_synced_at":"2025-04-04T11:09:11.853Z","repository":{"id":39422098,"uuid":"163127340","full_name":"FEMessage/el-form-renderer","owner":"FEMessage","description":"🎩A data-driven dynamic and complex form solution","archived":false,"fork":false,"pushed_at":"2022-11-07T01:32:59.000Z","size":10112,"stargazers_count":231,"open_issues_count":7,"forks_count":63,"subscribers_count":15,"default_branch":"dev","last_synced_at":"2024-10-17T03:14:44.012Z","etag":null,"topics":["data-driven","el-form","element-ui"],"latest_commit_sha":null,"homepage":"https://femessage.github.io/el-form-renderer/","language":"JavaScript","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/FEMessage.png","metadata":{"files":{"readme":"README-zh.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}},"created_at":"2018-12-26T02:30:08.000Z","updated_at":"2024-08-08T05:59:42.000Z","dependencies_parsed_at":"2023-01-21T23:00:57.695Z","dependency_job_id":null,"html_url":"https://github.com/FEMessage/el-form-renderer","commit_stats":null,"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-form-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-form-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-form-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-form-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FEMessage","download_url":"https://codeload.github.com/FEMessage/el-form-renderer/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["data-driven","el-form","element-ui"],"created_at":"2024-11-08T23:57:04.605Z","updated_at":"2025-04-04T11:09:11.834Z","avatar_url":"https://github.com/FEMessage.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# el-form-renderer\n\n[![Build Status](https://badgen.net/travis/FEMessage/el-form-renderer/master)](https://travis-ci.com/FEMessage/el-form-renderer)\n[![NPM Download](https://badgen.net/npm/dm/@femessage/el-form-renderer)](https://www.npmjs.com/package/@femessage/el-form-renderer)\n[![NPM Version](https://badgen.net/npm/v/@femessage/el-form-renderer)](https://www.npmjs.com/package/@femessage/el-form-renderer)\n[![NPM License](https://badgen.net/npm/license/@femessage/el-form-renderer)](https://github.com/FEMessage/el-form-renderer/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/el-form-renderer/pulls)\n[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)\n\n![](https://i.loli.net/2019/11/14/LBzrKgj7PCdfcev.png)\n\n## Table of Contents\n\n- [Introduction](#introduction)\n  - [内部集成](#内部集成)\n  - [外部扩展](#外部扩展)\n- [Feature](#feature)\n- [Links](#links)\n- [Quick Start](#quick-start)\n- [Inspiration](#inspiration)\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Introduction\n\n我们 [github 有这些组件](https://github.com/FEMessage)，它们并非孤立的，而是有关联的\n\n我们开发的表单相关的组件都可以配合 [@femessage/el-form-renderer](https://github.com/FEMessage/el-form-renderer)（以下简称为 el-form-renderer）使用\n\n可以说 el-form-renderer 是核心，扮演着枢纽的角色\n\n### 内部集成\n\nel-data-table、el-data-tree 等组件内部集成该组件，用于更加灵活的配置内部表单渲染的场景。\n\n以 el-data-table 为例，我们知道通过 el-data-table 可以快速生成一个列表的 CRUD 页面。而其中的搜索框，新增编辑的内容弹框，就是由 el-form-renderer 生成的。通过传入对应的配置项，就能生成相应的内容，不需要写 template。\n\n### 外部扩展\n\n在一些表单项场景，el-form-renderer 可用于表单项进行扩展。\n\n自定义组件按一定的格式实现 v-model，就能让 el-form-render 能渲染自定义组件\n\n如下图所示，两个图片上传、一个富文本编辑器，都是借助 el-form-renderer 渲染的。\n\n![example.png](https://i.loli.net/2019/11/14/yBUJ4LmjhPWHI9F.png)\n\n## Feature\n\n- 只需进行简单的配置，即可实现常用表单功能\n- 支持 setOptions 方法，动态改变 select 的 options\n- content 支持 `inputFormat`、`outputFormat`、`trim`，对组件输入输出值处理\n- 支持 `on` 进行事件监听，处理表单数据联动\n- 支持 `hidden` 进行表单项动态显示与隐藏\n- 支持渲染自定义组件\n- 支持自定义组件设置校验规则\n- 支持 v-model\n\n[⬆ Back to Top](#table-of-contents)\n\n## Links\n\n- [钉钉交流群](https://github.com/FEMessage/el-data-table/issues/181)\n- [api doc and online demo](https://femessage.github.io/el-form-renderer/)\n- [自定义组件接入指南](https://github.com/femessage/el-form-renderer/blob/master/docs/guide-custom-component.md)\n- [自定义组件设置校验规则](https://github.com/FEMessage/el-form-renderer/blob/master/docs/guide-custom-rules-in-custom-component.md)\n- [fem-vscode-helper](https://marketplace.visualstudio.com/items?itemName=FEMessage.fem-vscode-helper)\n- [实践案例](https://zhuanlan.zhihu.com/p/95725645)\n- [设置动态 options 指南](https://zhuanlan.zhihu.com/p/97827063)\n- [v-model 落地实践分析](https://zhuanlan.zhihu.com/p/108055158)\n\n[⬆ Back to Top](#table-of-contents)\n\n## Quick Start\n\n```sh\n# Step1 确认你已经正确安装并使用了 element-ui\nyarn add @femessage/el-form-renderer\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cel-form-renderer :content=\"content\"\u003e\u003c/el-form-renderer\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import ElFormRenderer from '@femessage/el-form-renderer'\n\n  export default {\n    components: {\n      ElFormRenderer,\n    },\n    data() {\n      return {\n        content: [],\n      }\n    },\n  }\n\u003c/script\u003e\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Inspiration\n\nthanks to [element-patch](https://github.com/leezng/element-patch)\n\n## Contributing\n\nFor those who are interested in contributing to this project, such as:\n\n- report a bug\n- request new feature\n- fix a bug\n- implement a new feature\n\nPlease refer to our [contributing guide](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).\n\n[⬆ Back to Top](#table-of-contents)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Alvin-Liu\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/11909145?v=4\" width=\"100px;\" alt=\"Alvin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlvin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=Alvin-Liu\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#review-Alvin-Liu\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/el-form-renderer/issues?q=author%3AAlvin-Liu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#blog-Alvin-Liu\" title=\"Blogposts\"\u003e📝\u003c/a\u003e \u003ca href=\"#ideas-Alvin-Liu\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://levy.work\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9384365?v=4\" width=\"100px;\" alt=\"levy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elevy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#review-levy9527\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#infra-levy9527\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#ideas-levy9527\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://evila.me\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19513289?v=4\" width=\"100px;\" alt=\"EVILLT\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEVILLT\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=evillt\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/el-form-renderer/issues?q=author%3Aevillt\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#blog-evillt\" title=\"Blogposts\"\u003e📝\u003c/a\u003e \u003ca href=\"#ideas-evillt\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://donaldshen.github.io/portfolio\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19591950?v=4\" width=\"100px;\" alt=\"Donald Shen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonald Shen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=donaldshen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-donaldshen\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://colmugx.github.io\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/21327913?v=4\" width=\"100px;\" alt=\"ColMugX\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eColMugX\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=colmugx\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=colmugx\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/el-form-renderer/commits?author=colmugx\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://67.216.223.155/resume/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26338853?v=4\" width=\"100px;\" alt=\"OuZuYu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOuZuYu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-form-renderer/issues?q=author%3AOuZuYu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](./LICENSE)\n\n[⬆ Back to Top](#table-of-contents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fel-form-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffemessage%2Fel-form-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fel-form-renderer/lists"}