大家好，我是外包全栈程序员小卷。我发现先后有两个项目都是老系统重构，数据维护平台基本都是大表单的页面，一个页面中的表单中包含了几十上百的表单元素，且布局也比较灵活，有栅格布局的，也有两列流式布局的。相信这类系统，很多小伙伴也遇到过吧。
传统的开发方式是，自己写html模板来构建整个表单，这个工作量可想而知有多大。后来有了Vue的数据渲染，可以把表单字段单独维护到一个typescript文件中，通过声明对象数组的配置方式来定义表单元素，然后在html中使用Vue的条件渲染v-if/else或者动态组件渲染<component :is="..." />的形式。这样只需要对表单定义数据做集中维护即可。这也是目前我们项目组所采用的方式。
通过ts的联合类型来囊括各种不同表单元素类型的配置选项，再基于编辑器的对ts类型声明的自动补全支持来提供可参考的选项，但也免不了要程序员写代码，且各种配置选项记不住，需要参考配置文档，另外对于布局这块的配置更麻烦，需要改代码来一点点尝试，来看页面的效果，不够直观。
在这个需求背景下，我们想到了渐渐退出江湖、销声匿迹的低代码可拖拽的表单设计器，看看用它能否解决我们的手动写代码配置带来的维护成本。通过调研，我们发现一款叫Variant Form（简称vform）的表单设计器，看到它在各平台大力推广，于是拉了源码，本地构建看了下。首先遇到的问题，启动dev服务后，首次访问浏览器很慢，半天才响应。主要原因：
- 首次依赖预构建（
esbuild把node_modules预打包到.vite）很重 Vite版本太老，2.7.3- 依赖的大包多：
element-plus、wangeditor、ace-builds、core-js这类都偏重
另外表单元素的排布依赖于预先配置好的栅格容器，且栅格无法做到宽度自适应，全都依赖手动设置所占列数
这种预留边框来限制表单元素布局的方式，不光嵌套的边框视觉体验差，挪动表单元素后还要再手动维护预留的栅格布局，操作体验也不好。
为此我们果断忽略了这种设计思路，转而寻求显示更简洁操作更简单的表单设计器布局方案。于是我们找到了bpmn.io出品的form-js，看了它的示例后，不禁惊叹，这设计太人性化了，这就是我要的设计！具体的案例可访问：demo.bpmn.io/form/new
于是就开始研究form-js的源码，仿照它的拖拽调整布局的设计做出了一个简易版的demo，后续会在这个demo上继续不断迭代完善。咱们的demo非常的轻量级，仅仅依赖了vue、tailwindcss和bpmn-io的拖拽库。下面就给大家演示下半成品。
咱们的表单设计器的布局非常灵活：
- 表单元素的布局不依赖于先创建预留的栅格框架，可任意的插入、挪出和调换位置
- 支持隐式的16栅格布局，页面上仅显示表单元素，非常的简洁美观
- 支持栅格列的宽度
auto自适应，能做出16栅格下例如4 auto 7 auto的row布局
- 后续将进一步仿照
form-js来实现表单元素容器两侧"把手"可拖拽的列布局调整
- 支持
flex流式布局（flow layout）
- 多行的栅格布局（grid layout）
这就是小卷给大家分享的低代码可拖拽表单设计器布局的实现思路。具体的实现我们结合了拖拽框架给我们提供的事件处理机制以及提供的上下文的DOM元素，然后判断各种插入位置的情况，用Vue数据驱动的方式来维护整个表单的配置数据，后续将进一步实现表单定义的json数据的导入和导出。一起加油！