Code address: gitee.com/wyh-19/supe…

Series of articles:

  • Vue + Element Large Forms solution (1)– Overview
  • Vue + Element Large Forms solution (2)– Form splitting
  • Vue + Element Large Forms Solution (3)– Anchor Components (part 1)
  • Vue + Element Large Form Solution (4)– Anchor Component (2)
  • Vue + Element Large Forms solution (5)– Validation identifier
  • Vue + Element Large Forms solution (6)– Automatic identification
  • Vue + Element Large Forms solution (7)– Form form
  • Vue + Element Large Form Solution (8)– Data comparison (1)
  • Vue + Element Large Form Solution (9)– Data comparison (2)
  • Vue + Element Large Forms solution (10)– Form communication and dynamic forms

preface

Recently encountered in the work of a super large form demand, in order to better implement and provide users with better experience, I design the solution for a large forms, in the process of implementation also get some derivative of output, can be said to be the vue a comprehensive application of the advanced features, therefore through this series of articles summarizes and sharing.

Function introduction

  1. The form is large and is divided into sections that are positioned using anchor points
  2. When the left form scrolls, the right anchor is updated to the corresponding position, and when the anchor is clicked, the left form is positioned to the corresponding chapter
  3. If there is a failed verification item in the form section, a warning is displayed in the anchor point for quick locating of the problem
  4. In business, data can be changed, and the changed fields can be identified and the data before the change can be viewed

Technology dependence

Vue2.6 + element – the UI

Implementation approach

  1. Large forms can not be written in a VUE file, otherwise it is inconvenient for many people to develop at the same time, it is also difficult to maintain, so it must be split
  2. To use the validata method for forms, even if the subform is split, it should either be a complete component of the El-Form or a component implementation that emulates the same interface
  3. The DOM structure of the left form is passed as a parameter to the anchor component, which is responsible for parsing out the chapter information and the corresponding verification error information for rendering and binding the scroll event
  4. Form item data alignment should be implemented in a non-aggressive manner

Based on the above ideas and requirements, the form is finally implemented, and the effect is as follows:

Results the preview

  1. Form and anchor left and right linkage and error location

Anchor points can be linked with the left form on the scroll, and can also identify the failed sub-form chapters in the left form, which is convenient for users to quickly locate problems.

  1. Support for irregular subforms

In this solution, subforms can be not only plain simple forms, but also irregular forms of different types. In the figure above, subforms can be tab-type form structures or dynamically incrementing and subtracting forms, both of which support form validation.

  1. Change data comparison after data change

As shown in the figure above, the form can compare the data before and after the change, identify the changed fields, and click to view the data before the change.

The following derived outputs are obtained:

Derivative output

  1. A complete suite of large forms solutions
  2. A universal subform mixin
  3. A reliable anchor point component
  4. A form data comparison instruction

Starting below, I’ll step through the entire design and development process. Thank you for reading, and your comments are welcome!