用elementui封装-开源可视化表单配置相关案例

2023-08-29 0 6,328 百度已收录

业务开发中使用动态标签,表单需要动态重组。 我在网上找到了一些可视化表单设计器的例子,在一些后台管理中也常用它们作为代码生成器。

表单生成器

1 简介

ElementUI表单设计和代码生成器可以直接在基于Element的vue项目中运行生成的代码; 它还可以导入 JSON 表单并使用支持的解析器将 JSON 解析为真实的表单。

地址:https://github.com/JakHuang/form-generator
预览:https://mrhj.gitee.io/form-generator/#/
协议:MIT

2. 预览疗效

配置界面

3.使用

通常我们在使用这类东西的时候,都会有一些多元化的需求,除非你的需求很简单,我会把自己处理好的目录结构放下来进行二次开发。

项目参考目录结构

网页

Epage是一个可视化的页面配置工具。 结合后端框架的相关组件库,可以实现复杂的界面交互。 我们会基于业界主流的组件库进行二次封装,使其成为Epage的可配置小部件。 目前我们只针对iview组件库进行封装,其他组件库还在规划中。 开发者还可以自定义开发小部件。常用于流程表单、中后台页面配置

开源地址:https://github.com/didi/epage
文档地址:http://epage.didichuxing.com/usage/#epage
开源协议:MIT

设计师疗效展示

该项目是一个基于schema的可视化页面配置工具。 目前,它基于 vue 和 iview 框架。 这个和其他有点不同的是,它增加了值逻辑处理,这在实际项目中是非常有必要的。

形式设计

它是一个基于Avue的表单设计器,而Avue是基于Element-ui二次封装的。

用elementui封装-开源可视化表单配置相关案例

项目地址:https://github.com/sscfaith/avue-form-design
预览地址:https://form.beta.kim/
协议:MIT

设计师疗效展示

k-形式设计

基于vue和ant-design-vue的表单设计器。 该风格使用 less 作为开发语言。 主要功能是通过简单的操作来配置以后的表单,生成可保存的JSON数据,并将JSON恢复为表单用elementui封装,使表单的开发更简单、更快捷

项目地址:https://gitee.com/kcz66/k-form-design
预览地址:http://cdn.kcz66.com/k-form-design.html
开源协议:MIT

疗效.gif

虽然我目前不建议在实际项目中使用这个,但是放出来的原因是这个项目不错,值得学习。 不推荐的原因是当前项目依赖的ant-design-vue还是1.x版本,ant-design-vue升级2.x几乎是颠覆性的改版。 基于vue3.0用elementui封装,最低必须是vue3.0,所以暂时不建议在项目中直接使用。 其实你觉得用1.x就够了,之前不需要升级,那么你可以试试。

ant-design-vue 文档

总结:

暂时就放上面的这些吧。 我个人使用的是第一个进行二次开发。 网上还有一些不开源的,就不放了。 它们基本上是相同的。 几乎所有的拖放工具都使用拖放库 vuedraggable。 表单库通常是基于框架编写的,常见的有element-ui、iview、ant-design-vue,这些都是常见的ui库。

以前的文章

Vue 后端开发 - 组件

Vue后端开发-打印功能实现

Vue后端开发-制作二维码

Vue后端开发-表单封装

Vue后端开发-数据交互axios

这波 JavaScript 可以收藏一波

整理一波开源后台管理项目

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 elementui 用elementui封装-开源可视化表单配置相关案例 https://www.wkzy.net/game/171757.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务