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

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

代码地址：gitee.com/wyh-19/supe…

系列文章：

• vue+element大型表单解决方案(1)--概览
• vue+element大型表单解决方案(2)--表单拆分
• vue+element大型表单解决方案(3)--锚点组件(上)
• vue+element大型表单解决方案(4)--锚点组件(下)
• vue+element大型表单解决方案(5)--校验标识
• vue+element大型表单解决方案(6)--自动标识
• vue+element大型表单解决方案(7)--表单形态
• vue+element大型表单解决方案(8)--数据比对(上)
• vue+element大型表单解决方案(9)--数据比对(下)
• vue+element大型表单解决方案(10)--表单通信和动态表单

前言

最近在工作中遇到一个超级庞大的表单需求，为了更好地实现以及给用户提供更好的体验，我设计了一个大型表单的解决方案，在实现过程中还得到一些衍生产出，可以说是对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. 一个表单数据比对指令

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

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!