{"id":13623170,"url":"https://github.com/dream2023/f-render","last_synced_at":"2025-10-02T00:31:46.592Z","repository":{"id":41263855,"uuid":"200664419","full_name":"dream2023/f-render","owner":"dream2023","description":"f-render | 基于 ElementUI 的表单设计器","archived":true,"fork":false,"pushed_at":"2021-05-10T16:54:09.000Z","size":60732,"stargazers_count":1588,"open_issues_count":14,"forks_count":316,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-01-15T21:17:15.105Z","etag":null,"topics":["element-ui","form-design","form-designer","form-generation","form-generator","renderer","vue","vue-ele-form","vue-form","vue2"],"latest_commit_sha":null,"homepage":"https://dream2023.gitee.io/f-render","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/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-08-05T13:48:54.000Z","updated_at":"2024-12-28T01:05:02.000Z","dependencies_parsed_at":"2022-09-03T05:10:44.262Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/f-render","commit_stats":null,"previous_names":["dream2023/vue-ele-form-generator"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Ff-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Ff-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Ff-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Ff-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/f-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234916159,"owners_count":18906643,"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-ui","form-design","form-designer","form-generation","form-generator","renderer","vue","vue-ele-form","vue-form","vue2"],"created_at":"2024-08-01T21:01:28.832Z","updated_at":"2025-10-02T00:31:46.115Z","avatar_url":"https://github.com/dream2023.png","language":"JavaScript","funding_links":[],"categories":["技术方案","JavaScript"],"sub_categories":[],"readme":"# f-render | 基于 ElementUI 的表单设计器\n\n[![MIT](https://img.shields.io/github/license/dream2023/f-render)](https://github.com/dream2023/f-render)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/f-render)\n![npm](https://img.shields.io/npm/dt/f-render)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/4c2ddffb-26b2-4e64-8b22-25678db57483/deploy-status)](https://app.netlify.com/sites/f-render/deploys)\n![gitub pages](https://github.com/dream2023/f-render/workflows/gitub%20pages/badge.svg)\n[![Star on GitHub](https://img.shields.io/github/stars/dream2023/f-render.svg?style=social)](https://github.com/dream2023/f-render/stargazers)\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4)\n- [介绍](#%E4%BB%8B%E7%BB%8D)\n- [注意](#%E6%B3%A8%E6%84%8F)\n- [特性](#%E7%89%B9%E6%80%A7)\n- [Demo](#demo)\n- [教程](#%E6%95%99%E7%A8%8B)\n- [1 分钟快速接入](#1-%E5%88%86%E9%92%9F%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5)\n    - [第 1 步：安装](#%E7%AC%AC-1-%E6%AD%A5%E5%AE%89%E8%A3%85)\n    - [第 2 步：注册](#%E7%AC%AC-2-%E6%AD%A5%E6%B3%A8%E5%86%8C)\n    - [第 3 步：使用](#%E7%AC%AC-3-%E6%AD%A5%E4%BD%BF%E7%94%A8)\n- [用户模式](#%E7%94%A8%E6%88%B7%E6%A8%A1%E5%BC%8F)\n    - [基于 f-render 的配置](#%E5%9F%BA%E4%BA%8E-f-render-%E7%9A%84%E9%85%8D%E7%BD%AE)\n    - [基于 vue-ele-form 的配置](#%E5%9F%BA%E4%BA%8E-vue-ele-form-%E7%9A%84%E9%85%8D%E7%BD%AE)\n- [定制化](#%E5%AE%9A%E5%88%B6%E5%8C%96)\n  - [新增官方扩展组件（以富文本扩展为例）](#%E6%96%B0%E5%A2%9E%E5%AE%98%E6%96%B9%E6%89%A9%E5%B1%95%E7%BB%84%E4%BB%B6%E4%BB%A5%E5%AF%8C%E6%96%87%E6%9C%AC%E6%89%A9%E5%B1%95%E4%B8%BA%E4%BE%8B)\n    - [安装组件](#%E5%AE%89%E8%A3%85%E7%BB%84%E4%BB%B6)\n    - [注册组件](#%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6)\n    - [配置属性](#%E9%85%8D%E7%BD%AE%E5%B1%9E%E6%80%A7)\n  - [新增自定义组件](#%E6%96%B0%E5%A2%9E%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6)\n    - [创建组件并全局注册](#%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%B9%B6%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)\n    - [书写配置](#%E4%B9%A6%E5%86%99%E9%85%8D%E7%BD%AE)\n    - [合并配置并传入](#%E5%90%88%E5%B9%B6%E9%85%8D%E7%BD%AE%E5%B9%B6%E4%BC%A0%E5%85%A5)\n  - [定制化原组件配置 \u0026 表单配置](#%E5%AE%9A%E5%88%B6%E5%8C%96%E5%8E%9F%E7%BB%84%E4%BB%B6%E9%85%8D%E7%BD%AE--%E8%A1%A8%E5%8D%95%E9%85%8D%E7%BD%AE)\n  - [定制化右侧 Tabs](#%E5%AE%9A%E5%88%B6%E5%8C%96%E5%8F%B3%E4%BE%A7-tabs)\n  - [样式定制化](#%E6%A0%B7%E5%BC%8F%E5%AE%9A%E5%88%B6%E5%8C%96)\n- [二次开发](#%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91)\n- [f-render 问答集锦](#f-render-%E9%97%AE%E7%AD%94%E9%9B%86%E9%94%A6)\n- [Props 说明](#props-%E8%AF%B4%E6%98%8E)\n- [插槽](#%E6%8F%92%E6%A7%BD)\n- [生态](#%E7%94%9F%E6%80%81)\n- [特别感谢赞助者](#%E7%89%B9%E5%88%AB%E6%84%9F%E8%B0%A2%E8%B5%9E%E5%8A%A9%E8%80%85)\n- [Contributors ✨](#contributors-)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## 介绍\n\nf-render 是基于 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；\n\n[![f-render 演示图](./demo.webp)](https://dream2023.gitee.io/f-render/)\n\n## 注意\n\n注意，此设计器不是独立存在的，是依托于 [vue-ele-form](https://github.com/dream2023/vue-ele-form)，在使用前请务必阅读 [vue-ele-form 的文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd)。\n\n## 特性\n\n- 组件方式：以组件方式接入，1 分钟轻松接入；\n- 体积小：Gzip 压缩后 `100k` 左右；\n- 易扩展：可以在`不更改源码`的情况下增删改属性、组件；\n\n## Demo\n\n[https://dream2023.gitee.io/f-render/](https://dream2023.gitee.io/f-render/)\n\n## 教程\n\n虽然 f-render 可以做到在不更改源码的情况下实现大量的定制化，但是依然有不少人希望能够根据公司的需求进行二次开发。\n\n所以我推出了一个从 0 实现整个项目的 [教程](https://www.lanqiao.cn/courses/2848)，如果感兴趣 f-render 的实现过程和思考，可以点击 [从 0 实现可视化表单组件](https://www.lanqiao.cn/courses/2848) 进行学习。\n\n## 1 分钟快速接入\n\n#### 第 1 步：安装\n\n```bash\nyarn add element-ui  # npm install element-ui -S\nyarn add vue-ele-form # npm install vue-ele-form -S\nyarn add f-render # npm install f-render -S\n```\n\n#### 第 2 步：注册\n\n```js\n// vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd\nimport EleForm from \"vue-ele-form\";\nimport FRender from \"f-render\";\nimport ElementUI from \"element-ui\";\nimport \"element-ui/lib/theme-chalk/index.css\";\n\nVue.use(ElementUI);\nVue.use(EleForm);\nVue.component(\"f-render\", FRender);\n```\n\n#### 第 3 步：使用\n\n```html\n\u003ctemplate\u003e\n  \u003cf-render\n    @save=\"handleSave\"\n    :loading=\"loading\"\n    height=\"calc(100vh - 60px)\"\n    :config=\"formConfig\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        loading: false,\n        formConfig: {}\n      };\n    },\n    methods: {\n      handleSave(res) {\n        // 这里是保存到 localStorage，你可以保存到服务器\n        localStorage.setItem(\"form-config\", res);\n        this.$message.success(\"保存成功啦~\");\n      }\n    },\n    mounted() {\n      // 模拟异步加载\n      this.loading = true;\n      setTimeout(() =\u003e {\n        this.loading = false;\n        this.formConfig = localStorage.getItem(\"form-config\") || \"\";\n      }, 1000);\n    }\n  };\n\u003c/script\u003e\n```\n\n## 用户模式\n\n我们把动态表单分为两个阶段：\n\n- 首先是设计阶段：通过拖拽设计表单；\n- 然后是用户阶段：将设计好的表单以纯表单的形式让用户填写。\n\n我们别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置我们已经讲了，下面看用户模式下的表单配置：\n\n#### 基于 f-render 的配置\n\n通过属性 `pure`, 可以直接做为表单使用，其数据提交方式同 `vue-ele-form` 一样，具体可查看[文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn)。\n\n```html\n\u003ctemplate\u003e\n  \u003cf-render\n    v-model=\"formData\"\n    :request-fn=\"handleSubmit\"\n    @request-success=\"handleSuccess\"\n    :config=\"formConfig\"\n    pure\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        formData: {},\n        formConfig: \"\"\n      };\n    },\n    methods: {\n      handleSubmit(data) {\n        // eslint-disable-next-line no-console\n        console.log(data);\n        return Promise.resolve();\n      },\n      handleSuccess() {\n        this.$message.success(\"创建成功\");\n      }\n    },\n    mounted() {\n      // 模拟异步加载\n      this.loading = true;\n      setTimeout(() =\u003e {\n        this.loading = false;\n        this.formConfig = localStorage.getItem(\"form-config\") || \"\";\n      }, 1000);\n    }\n  };\n\u003c/script\u003e\n```\n\n#### 基于 vue-ele-form 的配置\n\n如果你的可视化设计和表单使用，不再一个系统，可以直接使用 `vue-ele-form`，不必安装 `f-render`，具体如下：\n\n```html\n\u003ctemplate\u003e\n  \u003cele-form\n    v-model=\"formData\"\n    :request-fn=\"handleSubmit\"\n    @request-success=\"handleSuccess\"\n    v-if=\"formConfig\"\n    v-bind=\"formConfig\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        formData: {},\n        formConfig: null\n      };\n    },\n    methods: {\n      handleSubmit(data) {\n        // eslint-disable-next-line no-console\n        console.log(data);\n        return Promise.resolve();\n      },\n      handleSuccess() {\n        this.$message.success(\"创建成功\");\n      }\n    },\n    mounted() {\n      // 模拟异步加载\n      setTimeout(() =\u003e {\n        try {\n          // 这里必须对字符串进行反序列化\n          this.formConfig = eval(`(${localStorage.getItem(\"form-config\")})`);\n        } catch {\n          this.$message.error(\"数据解析失败\");\n        }\n      }, 1000);\n    }\n  };\n\u003c/script\u003e\n```\n\n## 定制化\n\n### 新增官方扩展组件（以富文本扩展为例）\n\n#### 安装组件\n\n```bash\nyarn add vue-ele-form-quill-editor\n```\n\n#### 注册组件\n\n```js\nVue.component(\"quill-editor\", EleFormQuillEditor);\n```\n\n#### 配置属性\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- 省略其它属性 --\u003e\n  \u003cf-render :comps=\"comps\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  // 默认配置\n  import comps from \"f-render/src/fixtures/comps\";\n  // 富文本配置\n  import quillEditor from \"f-render/src/fixtures/extends/quill-editor\";\n  // 可以更改显示组件位置，默认为 10\n  // 这里更改为 2，显示更靠前\n  quillEditor.sort = 2;\n\n  export default {\n    data() {\n      return {\n        // 拼接上即可\n        comps: comps.concat(quillEditor)\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### 新增自定义组件\n\n#### 创建组件并全局注册\n\n需要根据 vue-ele-form 文档[创建自定义组件](https://www.yuque.com/chaojie-vjiel/vbwzgu/ugumna)，并注册。\n\n#### 书写配置\n\n你可以参考[源码中的配置]('./src/fixtures/comps.js')，一下是范例和属性说明：\n\n```js\n// custom-url.js\nexport default {\n  // 假如这个组件叫 url（必填）\n  type: \"custom-url\",\n  // 默认标签名（必填）\n  label: \"URL\",\n  // 用于排序，值越小，越靠前\n  sort: 1,\n  // 属性配置\n  config: {\n    // 属性配置说明地址（可省略）\n    url: \"https://www.xxx.com\",\n    // 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）\n    attrs: {\n      // config 配置 参考 FormDesc:\n      // https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD\n      config: {\n        // max 为属性名\n        max: {\n          type: \"number\",\n          label: \"最大输入长度\"\n        },\n        name: {\n          type: \"input\",\n          label: \"原生 name\",\n          // 必填\n          required: true\n        }\n        // ....\n      },\n      // 默认值，如果在配置文件里设置了，则每个组件都会携带\n      data: {\n        name: \"url\"\n      }\n    },\n    // 表单项配置，是 FormDesc 中非 attrs 的其它配置，\n    // 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm\n    common: {\n      config: {\n        // 默认值\n        default: {\n          type: \"input\",\n          label: \"默认值\"\n        }\n      },\n      data: {}\n    }\n  }\n};\n```\n\n#### 合并配置并传入\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- 省略其它属性 --\u003e\n  \u003cf-render :comps=\"comps\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import comps from \"f-render/src/fixtures/comps\";\n  import customUrl from \"some/path/custom-url\";\n  export default {\n    data() {\n      return {\n        comps: comps.concat(customUrl)\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### 定制化原组件配置 \u0026 表单配置\n\n- 组件配置目录：`f-render/src/fixtures/comps.js`\n- 表单配置目录：`f-render/src/fixtures/form-props.js`\n- 表单项通用属性配置：`f-render/src/fixtures/form-item-common.js`\n- 扩展组件目录：`f-render/src/fixtures/extends/[扩展组件名].js`\n\n如果你想修改组件属性或者表单的属性，减少或者增加组件，可以将上述文件`拷贝到自己的项目`目录，参考上述配置说明，进行更改，并传入即可：\n\n```html\n\u003c!-- formProps 是表单属性 --\u003e\n\u003c!-- comps 是组件列表和属性 --\u003e\n\u003c!-- formItemCommon 是表单项通用属性配置 --\u003e\n\u003cf-render\n  :form-props=\"formProps\"\n  :comps=\"comps\"\n  :form-item-common=\"formItemCommon\"\n/\u003e\n```\n\n具体而言，如果想让每个 `input` 组件都携带 `clearable: true` 的属性，我们可以这样操作：\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- 其它属性省略 --\u003e\n  \u003c!-- 将更改后的 comps 传递过去即可 --\u003e\n  \u003cf-render :comps=\"comps\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import comps from \"f-render/src/fixtures/comps\";\n  // 查找 input 组件，当然你也可以看源码，直接查看索引\n  const inputIndex = comps.findIndex(item =\u003e item.type === \"input\");\n  // 更改 config.attrs.data 值即可\n  comps[inputIndex].config.attrs.data = { clearable: true };\n\n  export default {\n    data() {\n      return {\n        comps\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### 定制化右侧 Tabs\n\n我们可以通过 `isShowRight` 属性来控制右侧面板是否显示，通过 `rightTabs` 来定制具体显示的面板名称，具体如下：\n\n```html\n\u003ctemplate\u003e\n  \u003c!-- 定制化右侧 tabs --\u003e\n  \u003cf-render :right-tabs=\"tabs\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        tabs: [\n          { label: \"表单项属性配置\", name: \"form-item-common\" },\n          { label: \"组件属性配置\", name: \"form-item-attrs\" }\n          // 注释下面的内容，就可以不显示\n          // { label: \"表单配置\", name: \"form-props\" }\n        ]\n      };\n    }\n  };\n\u003c/script\u003e\n```\n\n### 样式定制化\n\n直接进行样式覆盖即可，注意不要加 `scoped`，否则覆盖不成功\n\n## 二次开发\n\n如果仅通过`属性`和`样式`定制化已无法满足的你和你产品经理的要求，那就需要进行定制化开发，我个人觉得代码整体还是非常简单的，你可以 `clone` 代码或者下载后（建议用[gitee](https://gitee.com/dream2023/f-render)），进行相应的更改，更改后有两种处理方式:\n\n- 直接放到项目目录里，并将安装 `dependencies` 的依赖复制到项目，进行开发即可；\n- 直接开发，然后发布到公司[私服](https://www.npmjs.com/package/verdaccio)，如果是开源，则可以发到 GitHub 或者 gitee，然后安装自己的即可\n\n具体的细节，开头提的[教程](https://www.lanqiao.cn/courses/2848)里会有详细的过程，希望大家可以支持一下。\n\n## f-render 问答集锦\n\n- [1、f-render 不能做什么？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#0nlfc)\n- [2、怎么实现 options URL 配置？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#gvS8c)\n\n## Props 说明\n\n```js\nprops: {\n  // 表单内容\n  config: {\n    type: [Object, String],\n    required: true\n  },\n  // 设计器整体高度\n  height: {\n    type: [String, Number],\n    default: \"400px\"\n  },\n  // 保存格式\n  saveFormat: {\n    type: String,\n    default: \"string\",\n    validator(val) {\n      return [\"object\", \"string\"].includes(val);\n    }\n  },\n  // 是否纯净（用于显示表单）\n  pure: Boolean,\n  // 表单配置\n  formProps: {\n    type: Object,\n    default: () =\u003e formProps\n  },\n  // 表单项配置\n  formItemCommon: {\n    type: Object,\n    default: () =\u003e formItemCommonDefault\n  },\n  // 组件列表\n  comps: {\n    type: Array,\n    default: () =\u003e comps\n  },\n  // 操作配置\n  operations: {\n    type: Array,\n    default: () =\u003e [\"preview\", \"data\", \"code\", \"batch\", \"clear\", \"save\"]\n  },\n  // 是否显示右侧\n  isShowRight: {\n    type: Boolean,\n    default: true\n  },\n  // 右侧属性面板 Tabs\n  rightTabs: {\n    type: Array,\n    default: () =\u003e [\n      { label: \"表单项属性配置\", name: \"form-item-common\" },\n      { label: \"组件属性配置\", name: \"form-item-attrs\" },\n      { label: \"表单配置\", name: \"form-props\" }\n    ]\n  },\n  // 是否在加载\n  loading: Boolean,\n\n  // 表单相关（pure 为 true 时）, 同 vue-ele-form\n  // https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7\n  requestFn: Function,\n  isLoading: Boolean,\n  formError: Object,\n  // ....\n},\n```\n\n## 插槽\n\n- left：左侧组件列表\n- main: 中间区域\n- main-header: 头部操作区\n- main-content: 表单设计区\n- right: 右侧属性配置区\n\n举例：\n\n```html\n\u003ctemplate\u003e\n  \u003cf-render\u003e\n    \u003c!-- 左侧插槽 --\u003e\n    \u003ctemplate v-slot:left=\"{frender}\"\u003e\n      \u003cdiv\u003e\n        \u003cdiv\u003eleft\u003c/div\u003e\n        \u003cdiv\u003e{{frender.comps}}\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/f-render\u003e\n  \u003ctemplate\u003e\u003c/template\n\u003e\u003c/template\u003e\n```\n\n其中 `frender` 数据是 `f-render` 组件数据的集合，具体都有哪些数据，可以参考[源码](https://gitee.com/dream2023/f-render/blob/master/src/f-render.vue)，其它插槽均有此参数。\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## 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-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://dream2023.github.io\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/19297757?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e张超杰\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dream2023/f-render/commits?author=dream2023\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/dream2023/f-render/commits?author=dream2023\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-dream2023\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Wisenl\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/17942052?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWisen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dream2023/f-render/commits?author=Wisenl\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/IWANABETHATGUY\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/17974631?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIWANABETHATGUY\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dream2023/f-render/commits?author=IWANABETHATGUY\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Ff-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Ff-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Ff-render/lists"}