vue+element大型表单解决方案(1)–概览

前言

最近在工作中遇到一个超级庞大的表单需求，为了更好地实现以及给用户提供更好的体验，我设计了一个大型表单的解决方案，在实现过程中还得到一些衍生产出，可以说是对vue高级特性的一次全方位应用，因此通过本系列文章进行总结和分享。

功能简介

1. 表单内容很庞大，分成多个章节，使用锚点对这些章节进行定位
2. 左侧表单滚动时，右侧锚点会更新至相应的位置，点击锚点时，左侧表单定位到相应的章节
3. 表单章节中有未通过的校验项时，在锚点中显示警告，便于快速定位问题
4. 在业务上，数据允许变更，变更后可以标识出有变动的字段并可以查看变更前的数据

技术依赖

vue2.6 + element-ui

实现思路

1. 大表单不能用一个vue文件编写，否则不便多人同时开发，也很难维护，所以一定要拆分
2. 考虑到要使用表单的validata方法，即使拆分的子表单，也应该是一个完整的el-form的组件或者模拟相同接口的组件实现
3. 将左侧表单的dom结构作为参数传给锚点组件，锚点组件负责解析出章节信息以及相应的校验报错信息进行自身渲染以及绑定滚动事件
4. 表单项数据比对应该采用非侵略的方式进行实现

基于以上思路和要求，最终完成了这个表单实现，效果如下：

效果预览

1. 表单与锚点左右联动以及错误提示定位

锚点可以和左侧表单在滚动上联动，还能标识出左侧表单中有未通过校验的子表单章节，便于用户快速定位出问题。

2. 支持不规则子表单

该解决方案中，子表单不仅可以是简单的普通表单，也可以是不同类型的不规则表单。在上图中，子表单可以是表格类型的表单结构，也可以是动态增减的表单，并且都支持表单校验。

3. 数据变更后的变动数据比对

如上图所示，表单中可以比对变更前后的数据，标识出有变更的字段，并可以点击查看变更前的数据。

得到了以下衍生产出：

衍生产出

1. 一整套大型表单解决方案
2. 一个普适性较强的子表单mixin
3. 一个可靠的锚点组件
4. 一个表单数据比对指令

从下面开始，我将逐步重现整个设计与开发过程。谢谢您的阅读，欢迎提出指正意见！