preface

More than a year ago, I made a simple version of the form scheme in the company. The scheme at that time was actually immature, but the direction was right. There are very few well-known backend forms solutions for Vue, unlike the React ecosystem with Uform, Formily, Amis, and so on. So I rewrote the Elemenet-UI based form solution, this time much more powerful.

What is el-form-schema?

El-form-schema is a form solution in the middle and background. It not only covers the layout of forms, component linkage, verification and other scenarios, but also extends the support for Object, array, and table to meet more complex business scenarios. It aims to make form development easy to use, simple, and efficient!

El-form-schema document address: efs.apidevelop.com/

El – form – schema function

  1. supportelement-uiAll form components
  2. Built-in supportobject,array,table, can efficiently solve more complex business scenarios (there should be applause here 👏)
  3. Built-in supportslotSlot mode
  4. Built-in support for component SettingsinlineInline layout properties to make layout more flexible (there should be applause 👏)
  5. Built-in support forobject,arraySet up theinlineThe way of
  6. objectBuilt-in support for card and FieldSet layout types,arrayThe built-in card layout is supported.
  7. Complex interworking between components is supportedVif: "String expression" 和 Props: {disabled: "string expressions"}
  8. Support for introducing custom components if you want to implement bidirectional binding (note: this component is implementedv-modelGrammar sugar)
  9. Supports uniform setting of component widths

Reference research materials:

1. Vue dynamic multilevel form component — VUe-dynamic-form-component that supports nested objects and multilevel arrays

  1. formvuelate.js.org/#playground

3. Github.com/formschema/…

4. uformjs.org/

5. formilyjs.org/

6. baidu.gitee.io/amis