Moment For Technology

How does Vue implement circular nested forms using element-UI

Posted on Aug. 8, 2022, 5:55 p.m. by Ishaan Vyas
Category: reading Tag: vue.js css product element

1. Premise basis

  • Familiar with vue.js and element-UI.
  • A VUE project has been created.

2. Function Description

  1. The page looks like this:
  2. Function point Introduction: this is a description of product information page, the whole is a form, need to verify the product name and description. A list of issues required for the product is used to collect user feedback on the product. The list of questions is optional, but once a question is added, the title and description of the question are mandatory.
  3. Button function description:
  • Click the Add button to add a question form, and the fold button appears.
  • Click the "Clear" button to clear all the problem forms, fold up the button and disappear;
  • Click the "fold up" button to fold up the form and expand the document. Click expand, the form expands, the copy becomes folded;
  • Each form has a delete button, click delete, delete the corresponding question form, question 1, question 2, and so on to reorder. When all problem forms are deleted, the button disappears.

3. Code explanation

  1. Create a new page for formexample. vue, add it to the project route and open it (omit the CSS styles section).
  2. Create a form:
  3. Add subform sections:
  4. Add click events to add and clear buttons:
  5. Click the Add button to display the fold button, click clear to empty the form:
  6. Add a click event to the fold button:
  7. Click the "fold up" button to fold up the form and expand the document. Click expand, the form expands, the copy becomes folded; Use the isShow parameter to control the height of the problem form to collapse and expand.
  8. Add click events for each question form deletion:
  9. The logic to this page is basically implemented. Now let's add validation rules to the form and add the submitForm method.
  10. When the problem list form has a problem, it also needs to validate the problem form. Add a validation rule to the self form:
  11. Verify the parent form first, if the parent form passes the verification, continue to verify the child form, return the verification result of the child form, the page effect is as follows, if the state is closed, the page will automatically expand, and throw an error:
  12. If the subform is also verified, click Save to submit successfully:
  13. At this point our functionality has been fully implemented.

4. Function expansion

  • Consider: What if we don't just have a list of questions, but multiple similar subforms at the same time?
  • The page looks like this:
  • You can think by yourself first. If you don't understand, you can @ me, and I will answer in the follow-up. At this point we need the validation method for the childForm. The childList and childForm arguments are configurable variables.
About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.