表单设计规范梳理与表单页面可视化生成工具开发

SEO关键词：

在开发一个项目时，发现表单与表格的页面占比很大，为了节省开发时间，避免多人协作时出现多套冗余代码，尝试编写表单和表格的生成工具。

从梳理到规范学习再到总结，收获很多，文章主要分享：

1. 表格生成
2. 表格预览

表格生成

创建表后，可以保存为项目，也可以独立下载。在表格生成中，添加、删除、插入、编辑，这些功能比较成熟，还有很多不成熟的地方。

工作原理：

• 使用Dom得到数据。
• 用js生成HTML代码。
• 使用js将代码放至目标div。

表单中遇到的问题：

• 如何让表头与表身保持一致：表格头、表格主体在一些属性的设定上，表格头设定thead，表格主体设定tbody，遇到最大问题便是表单嵌套，有的表头需要写成表单，有的表单中又嵌套了表头。
• 如何让使用者能方便的使用，且不会混乱：生成器中的表单可创建、删除、编辑等，操作过多也会对使用者造成很大的麻烦，所以设计的时候需要针对不同人，生成不同的方案。
• 表格如何适配大屏：对于大屏而言，一个表格无法展示全部，因此针对大屏添加了更多功能，让使用者能够查看整个表格。

表单中解决的方法：

• 如何让表头与表身保持一致：针对不同的表格做了处理，有的对齐，有的不随拖拽发生变化。
• 如何让使用者能方便的使用，且不会混乱：对于复杂的表格，往往是多人协作，开发者只能看到最终结果，无法看到生成器的变化，所以对于需要自己修改的使用者，在查看生成器时，只能看到基础的表格。
• 表格如何适配大屏：主要就是添加了滚动条，在滚动时出现了很多问题，一开始的问题是表格抖动，后来发现是因为表格的宽度超过了父级，然后缩小了滚动区域，使得高度不够滚动，后来用js控制了滚动高度，才解决了这个问题。

表单中的总结：

• 表格生成器是一个可以生成任何表格的工具，对于简单的表格，需要花费较多的时间，但对于复杂的表格，却节省了很多时间。
• 不同的表格情况有很多，需要对不同情况进行处理。

表格预览

为什么要预览：

• 对表格生成器进行测试。
• 有很多功能需要调试，在修改代码之后，需要查看结果。

遇到的问题：

• 表格无法正常渲染。
• 有些功能需要前端请求，后端无法提供数据。

解决方法：

• 针对不同的表格情况，设置不同的预览方式。
• 对于需要前端请求的数据，在预览的时候，从本地获取数据。

总结：

• 预览对于表单生成器是必须的，能检查是否存在问题，还能调试功能。
• 预览的实现方式有很多，需要根据不同的情况选择不同的方式。