preface

We all know that forms are the most important part of back-end projects, and the amount of time spent on forms varies from person to person. Forms occupied most of our page development time, because there was no unified page form specification in the team at the beginning, so everyone could write very freestyle. Maybe we were just banging for a while, banging for a while. But a debt must be paid sooner or later. There is a saying that “a programmer who can’t be lazy is not a good programmer”. For me, an old cheng who likes to be lazy, I really feel that it is a waste of life to write repetitive things. I always think life should not be like this, and there should be poetry and distance. As the saying goes, “My life is determined by me, but not by god. Handwritten forms take time.” So I went against the grain and started refactoring forms.

Form the advanced

  • Elementary: Develop a form component, preferably one that standardizes form page development (element-form-schema here it comes)
  • Intermediate: Develop Snippets of elemental-UI components based on VS Code Snippets (elemental-schema.json.code-snippets it’s coming)
  • Advanced: Develop a UI interactive form drag-and-drop plugin for generating page files based on VS Code IDE plug-in functionality (elemental-form-schema-editor here it comes)

Elementary: Develop a form component, preferably one that standardizes form page development (element-form-schema here it comes)

Actually form components in the development, research some similar industry solutions, the react of the scheme is more, such as uform (ali), amis (baidu) belong to the big companies such as plan, and for the vue under the framework of general form schema and can meet the project business plan very few, even if you find the can’t see the inside of the hole, Unless you know it like the back of your hand, it’s a hole in the team. To name a few features that a form Schema must support: it must support all components (custom components, globally registered components), components must support complex conditions like V-IF (linkage requirements), components must support arrays, and any slot slots between components must be supported. On second thought, element-form-schema was developed.


Elemental-form-schema is a form component based on Vue Render, Elemental-UI, designed to:

  • In order to unify the form form standardization development;
  • To improve the efficiency of form development;
  • To make forms maintainable;

Element – form – schema features:

  • Support ‘query form’, ‘popbox’, ‘new form’ needs
  • Supports’ expand/hide ‘requirements for query forms
  • Support for extending the ‘rules’ validation of’ element-form-item ‘to form components by calling the’ resetFields’ method via ‘ref’
  • Support for setting ‘inline’ particularity in form components separately
  • Support unified setting components: ‘size’, ‘width’
  • Supports simple and complex linkage between form components. ‘Hide: vif:’ conditional ‘, ‘disabled: {disabled:’ conditional ‘} ‘
  • {tag: ‘slot’, slot: ‘slot-name’}
  • [Highlights] Support service components



In fact, there are two types of forms at most, which can be summarized as list query form and new page form

Simple scenario:





More complex scenarios:



Element-form-schema Form component code snippet:





Intermediate: Develop Snippets of elemental-UI components based on VS Code Snippets (elemental-schema.json.code-snippets it’s coming)

You might say, how do you do updates to snippets, do you copy and paste? In fact, we developed an internal Node CLI tool to maintain the update. (Note: please let me know if you have any good suggestions.)



Advanced: Develop a UI interactive form drag-and-drop plugin for generating page files based on VS Code IDE plug-in functionality (elemental-form-schema-editor here it comes)

Here’s a big thanks for JakHuang’s plugin for inspiration: github.com/JakHuang/fo…

List query form:



New page form:



Component property Settings:



GIF demo:


Conclusion: I’m sure there are a lot of developers like me who are still writing forms every day, and I hope this article will give you some ideas and inspiration.

It’s 2020, so please remember: “My destiny is not my destiny. Writing forms takes time.”