preface

If you’re a front-end developer, you’re stuck in an endless loop: every functional module is inseparable from the CRUD interface, and every CRUD interface looks the same, except for the different fields displayed, so a lot of repetitive work is done by CTRL + C, CTRL + V every day.

Can’t be! We’re gonna make a difference. We’re gonna make a difference.

To prepare

The first step

  • A search bar component that implements configurable fields (search criteria that can be used for tables)
  • Toolbar components that implement configurable fields (for adding, editing, deleting, etc.)
  • A table component that implements configurable fields
  • A form component that implements configurable fields

In short, encapsulate the basic components and generate the desired ones from configuration filesElement

The second step

  • Assemble components into template code based on the UI design
  • The implementation takes the form of a command line, with handlebars.js generating code blocks

The principle of

Demo

The effect

configuration

Search bar
[{component: 'GInput'.prop: 'account'.label: 'account'.value: ' '}, {component: 'GInput'.prop: 'name'.label: 'name'.value: ' ',},]Copy the code
The toolbar
[
    TOOLBAR_PROP.CREATE,
    TOOLBAR_PROP.EDIT,
    TOOLBAR_PROP.DELETE,
    TOOLBAR_PROP.REFRESH,
    TOOLBAR_PROP.FULL_SCREEN,
]
Copy the code
form
[{prop: 'account'.label: 'account'}, {prop: 'name'.label: 'name'}, {prop: 'creator'.label: 'Founder'}, {prop: 'creationTime'.label: 'Creation time'.format: 'dateTimeFormat',},]Copy the code
The form
[{component: 'GInput'.prop: 'name'.label: 'name'.value: ' '.rules: [{required: true.message: 'Please enter your name'.trigger: 'change' },
            { validator: validateName, trigger: 'change'},],}, {component: 'GSelect'.prop: 'gender'.label: 'gender'.value: ' '.options: [{label: 'male'.value: 'MALE'},
            { label: 'woman'.value: 'FEMALE'},].rules: { required: true.message: 'Please select gender'.trigger: 'change'}},]Copy the code

use

Refer to the vue – dynamic – crud