基于Vue和Quasar的前端SPA项目实战之拖拽表单定制（十六）
回顾
通过前一篇文章基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，实现了元数据中动态表单设计功能，支持常见的数据类型和索引，然后实现了动态表单的crud增删改查功能，所有的表单页面都是默认的风格。本文主要介绍拖拽表单定制功能，通过拖拽的方式定制表单录入和编辑页面，满足了个性化需求。
简介
针对元数据表的每个字段，通过拖拽方式决定是否显示或者隐藏，然后还可以配置显示的宽度。最终以json格式保存到后台数据库，运行时根据配置动态渲染录入和编辑表单form页面。针对不同的设备（电脑，平板，手机）都可以单独定制。
UI界面
页面构建
运行时
代码
说明
采用开源框架vuesortable，基于vue的实现排序，支持拖拽。页面构建分为左中右三个部分，左边为候选字段，中间为需要显示的字段，右边可以针对每个字段单独设置一些属性，比如宽度等。
数据表
创建表单tableFormBuilder，用于存储页面构建json数据，包括类型type、设备device、内容body等字段, 充分利用crudapi功能，API部分零代码实现。
tableFormBuilder
核心代码
页面构建
{{formElement.column.caption}}:
移除
通过draggable标签实现
运行时渲染
{{formElement.column.caption}}:
{{ formElement.column.value | relationDataFormat(formElement.column) }}
判断是否存在定制页面，如果存在动态渲染，否则采用默认页面布局。
例子
以产品为例，配置好录入页面之后，运行时原来的默认录入页面用新的页面代替，新的表单页面和之前配置的表单页面一致，功能不受影响，可以正常的录入数据。
小结
本文主要通过拖拽方式实现表单定制功能，使用非常方便，零代码定制表单录入和编辑页面，满足了个性化需求，整个过程无需写代码。
crudapi简介
crudapi是crud+api组合，表示增删改查接口，是一款零代码可配置的产品。使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单，所有人都可以免费使用！无需编程，通过配置自动生成crud增删改查RESTful API，提供后台UI管理业务数据。基于主流的开源框架，拥有自主知识产权，支持二次开发。
demo演示
crudapi属于产品级的零代码平台，不同于自动代码生成器，不需要生成Controller、Service、Repository、Entity等业务代码，程序运行起来就可以使用，真正0代码，可以覆盖基本的和业务无关的CRUD RESTful API。
官网地址：https://crudapi.cn
测试地址：https://demo.crudapi.cn/crudapi/login
附源码地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web
由于网络原因，GitHub可能速度慢，改成访问Gitee即可，代码同步更新。
Original: https://www.cnblogs.com/crudapi/p/15512228.html
Author: crudapi
Title: 「免费开源」基于Vue和Quasar的前端SPA项目crudapi零代码开发平台后台管理系统实战之之拖拽表单定制（十六）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/713162/
转载文章受原作者版权保护。转载请注明原作者出处！