前言

最近在学习 ruoyi-flowable-plus 这个项目中表单构建（也叫表单设计、动态表单）模块，

但是发现表单设计中不支持表格布局，于是简单调研了一下表格布局的知识和改造成本。

什么是表格布局？

用 diboot 项目来截图说明：

table

首先进行开源代码溯源：

ruoyi-flowable-plus 的表单设计模块基于 ruoyi-vue，然而 ruoyi-vue 又基于 form-generator，

最终也就定位到 form-generator 这个开源项目，将对其进行源码分析。

为什么要溯源到底，而不是直接阅读 ruoyi-flowable-plus 的表单设计源码？

答：虽然经过了每个作者的改造，但是在该模块的底层引擎方面，并没有做过多的改动，追溯到最原始的作者以及仓库，能拿到原作者的设计思路、教程等资源。

通过阅读 form-generator 仓库的 README.md 可以获知，该项目主要由四个大部分组成：《表单设计器》《表单解析器》《vue 代码生成器》《vue 代码预览器》

按照习惯以及数据流走向，先去了解《表单设计器》再去了解《表单解析器》的源码：

《表单设计器》：

源码最核心的地方来自这 3 个目录：

可以在第 1 个目录下的 html.js 文件中找到一个名叫 layouts 的函数，发现只支持 col 和 row 布局。假如我们要改造引擎，使其最底层从只支持 col 和 row 布局拓展到支持 table 布局，那么 layouts 函数则是切入点。

但要知道的是：改动底层的引擎意味着你将层层往上改动，可能会涉及到改动所有的代码。

《表单解析器》：

源码最核心的来自这 1 个目录：

同理，可以在该目录下，找到一个 Parser.vue 文件，里面依旧存在一个名叫 layouts 的函数，假如要支持表格布局，这里也将是同步更改的一个点。

《vue 代码生成器》和《vue 代码预览器》：

改动上面两个模块，理论上也将同步改动这两个模块，不然的话，只能丢弃这两个模块的不用。

比如 k-form-design 等支持表格布局的社区项目都是只能达到学习的目的，并不能将其表格布局直接迁移到 form-generator，因为简单了解核心文件可以发现：

本文正在参加「金石计划」