介绍

自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,因此现在很多大型应用程序都提供了自定义表单的功能,今天就为大家介绍一些在github上发现的比较符合需求的基本实现,需要自己配合后台,但是最难的部分,也就是前端设计器的部分基本上不需要动,一起来看一看!

开源项目首页

笔者在接到项目要求后,在github上找了很久,也有好几个版本,现在全部都贡献出来,以便于大家参考,其中包括了PC端和移动端(分开的并不是集成在一起的,有点遗憾),有一些虽然开源,但是收费这里就不介绍了,下面是相关地址:

笔者是在第一个Vue版本的基础上修改的,其实大部分代码不需要修改,不过需要自行整合金自己的项目,可以根据自己的需求进行整合

项目介绍

因为笔者使用的是第一个,因此就直接拿第一个进行简单的介绍,遗憾的是没有找到React和Angular版本的,可以根据需要自行选择。

1、项目结构

大致的项目结构如下,这只是一个基础的脚手架项目,因为开源的时间较长,脚手架使用的不是最新版,不过这不是重点:

2、组件部分

这部分主要就是自定义的一些控件部分,像文本框、下拉框等的渲染部分都在这里,对应如下部分

3、中间界面部分

也就是进行拖拽后的表单容器

4、设置部分

整个项目也就分为大致这几个部分,由于笔者刚刚接触Vue不久,有些地方也可能存在理解不到位的地方,这里就不在过多介绍,另外还包括头部和按钮部分,整个界面的核心就是中间的设计器部分,有需要的朋友自行修改即可,其中控件当中包含的明细,相信是大家需要的!

5、开发

首先先克隆或者下载下来源代码:

# 安装依赖

npm install

# 启动服务

npm run dev

# 构建打包

npm run build

PC版的大致预览

可实现自

java 自定义表单 开源_开源的自定义表单设计器基础源码,PC端+移动端相关推荐

  1. Java实现对货物抽检_Java开源生鲜电商平台-库存管理设计与架构(源码可下载)...

    Java开源生鲜电商平台-库存管理设计与架构(源码可下载) 说明:Java开源生鲜电商平台-库存管理设计与架构有以下几个功能 WMS的功能: 1.业务批次管理 该功能提供完善的物料批次信息.批次管理设 ...

  2. 数据透视表 字段交叉_删除数据透视表的计算字段的宏

    数据透视表 字段交叉 Have you ever recorded a macro to remove pivot table calculated fields? Just turn on the ...

  3. 小剧场短剧影视小程序源码 全开源 带支付收益等模式 付费短剧小程序源码

    简介: 小剧场短剧影视小程序源码 全开源 带支付收益等模式 付费短剧小程序源码 多平台小程序支持 项目功能介绍 支持无限滑动 高性能滑动 预加载 视频预览 支持剧情介绍,集合壁纸另外仿抖音滑动效果 支 ...

  4. java毕业设计——基于java+J2EE+Hibernate的校园二手交易网站设计与实现(毕业论文+程序源码)——二手交易网站

    基于java+J2EE+Hibernate的校园二手交易网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+J2EE+Hibernate的校园二手交易网站设计与实现,文章末尾附有 ...

  5. java毕业设计——基于java+JSP+sqlserver的智能在线考试信息管理系统设计与实现(毕业论文+程序源码)——智能在线考试信息管理系统

    基于java+JSP+sqlserver的智能在线考试信息管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+JSP+sqlserver的智能在线考试信息管理系统设计与实现, ...

  6. java毕业设计——基于java+eclipse+sqlserver的银行帐目管理系统设计与实现(毕业论文+程序源码)——银行帐目管理系统

    基于java+eclipse+sqlserver的银行帐目管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+eclipse+sqlserver的银行帐目管理系统设计与实现, ...

  7. java毕业设计—— 基于java+JPA+jsp的进销存管理系统设计与实现(毕业论文+程序源码)——进销存管理系统

    基于java+JPA+jsp的进销存管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+JPA+jsp的进销存管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦 ...

  8. HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...

    HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...

  9. HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码

    HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...

  10. 【java毕业设计】基于java+swing+CS的图书销售管理系统GUI设计与实现(毕业论文+程序源码)——图书销售管理系统

    基于java+swing+CS的图书销售管理系统GUI设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+CS的图书销售管理系统GUI设计与实现,文章末尾附有本毕业设计的 ...

最新文章

  1. class function,delphi静态函数的对象基址分析static
  2. java HashMap和LinkedHashMap区别
  3. netty系列之:netty中的懒人编码解码器
  4. Cppunit 源码 SynchronizedObject
  5. 继承的方式编写日向家族
  6. 【数据结构】堆、堆排序笔记
  7. GoAhead WebServer 架构
  8. arm服务器虚拟x86,云服务器arm64和x86
  9. 某学校买了一批计算机配置为,初中信息技术考试选择题
  10. uniapp适配pc_uniapp+Html5端实现PC端适配
  11. UG10.0 工程图 在注释的时候 引用/插入 组件尺寸
  12. (一百二十三)Android O 了解wifi eap中的anonymous identity
  13. 通过U盘安装Windows11时遇此设备不支持升级时的解决办法
  14. [Go]select监听channel
  15. csgo为什么显示vac无法连接服务器,csgovac无法验证您的游戏会话怎么办 看完你就知道了...
  16. 福利来了!html类名大合集一,需要的快收藏!
  17. 【苹果相册推】软件安装ipv6得到可由Apple使用ArrayList tmpMacList
  18. Excel收纳箱:如何通过VBA获得包含数据的最大行
  19. 前端 原型对象中this的认识
  20. 【Noip模拟 20161004】局域网

热门文章

  1. 关闭git命令窗快捷键_git常用命令与AndroidStudio常用快捷键
  2. CDATA不支持html,我应该在HTML5中使用(Should I use in HTML5?)
  3. HTML中的特殊字符
  4. android向DDR读写数据,解决刷机回安卓时提示:Romcode/初始化DDR/读取初始化结果/USB...的问题...
  5. Git(2):如何更改GitHub仓库中项目的语言属性
  6. poj2054 Color a Tree
  7. 数据分析的一些简单思路总结
  8. Docker安装nginx以及负载均衡
  9. 一些常见的js问题总结
  10. 制作python模块安装包[转载自刘天斯]