Shulou(Shulou.com)06/03 Report--

Editor to share with you the Vue data-driven form rendering form form example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Form-create

The form generator with dynamic rendering, data collection, checksum and submission functions supports two-way data binding, event extension and custom components. It can quickly generate 17 functional components including provincial, municipal and regional three-level linkage, time selection, date selection and so on.

Github | document

Form-create is an open source project based on Vue that can quickly generate form elements for iviewUI. The goal is to save developers time spent on the form page and thus focus more on functional development. Use form-creae to quickly and easily generate all kinds of forms needed in daily development.

Demo

Generator

How to create an input input box gracefully and dynamically.

There is a built-in rule generator, which is used to generate the helper method of component rules, and the corresponding component rules can be generated quickly through chain operation.

Json

Use json data generation. You can return to the generation rules through the backend for rendering.

Php form generator, which is another open source project of mine. Form rules are generated through php, and the front end can use form-create to render the form directly according to the parameters. In this way, the front and rear ends can be separated, and the back end can easily control the components and fields in the form.

Dynamic rendering

When the generation rules change, the page is also updated in real time. Version 1.5 adds the component caching feature, which will update the components as needed, greatly improving the rendering speed and performance.

Dynamically render instance 1

Dynamic rendering instance 2

Custom component

Form-create supports the generation of arbitrary custom components, including the nested use of form-create.

Give an example

Generate an iview button component in the form

Generate an elementUI component reference case

Using custom components can increase the flexibility of forms and enable forms with more complex functions.

Realization principle

Form-create component rendering / updating mechanism diagram

Form-craete dynamic rendering form mechanism diagram

The above is all the contents of the article "sample Analysis of Vue data-driven forms rendering form forms". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.