form-create the tutorial: a custom layout, multiple components to achieve a line form-create Tutorial: Remove the default submit button form-create tutorial: to built-in components and custom components to add events

This article describes how to form-create custom layout, to achieve a plurality of line assemblies

form-create  a JSON can generate a dynamic rendering, data collection, validation and submit the form builder function. Vue and support the generation of any component. Combined with the built-in 17 kinds of commonly used form components and custom components, more complex forms can be easy to get.

If it helps you, you can  GitHub  to the point of a "Star" on the support Thank you!

 

By providing the generation rules colmay be implemented configuration item layout component

Example 1: 

[
    {
        type:'input',
        field:'test-1',
        title:'col-12',
        value:'',
        col:{
            span:12
        }
    },
    {
        type:'input',
        field:'test-2',
        title:'col-12',
        value:'',
        col:{
            span:12
        }
    }
]

 

Example 2:

Used in the examples are ElementUI

When not set colby default when{span:24}

[
    {
        type: 'el-row',
        native: true,
        children: [
            {
                type: 'el-col',
                props: {
                    span: 12
                },
                children: [
                    {
                        type:'datePicker',
                        title: '活动日期',
                        field: 'section_day',
                        value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
                        The props: { 
                            type: 'dateTimeRange' 
                        } 

                    }, 
                    { 
                        type: 'TimePicker' , 
                        title: 'active time' , 
                        Field: 'section_time' , 
                        value: [ '11:. 11:. 11 ', '22: 22 is: 22 is' ] , 
                        props: { 
                            isRange: to true , 
                            placeholder: "choose time"
                        }

                    },
                ]
            },
            {
                type: 'el-col',
                props: {
                    span: 12
                },
                children: [
                    {
                        type:'inputNumber',
                        title: '排序',
                        field: 'sort',
                        value: 0,
                        props:{
                            precision: 2
                        },
                        col:{
                            span: 12
                        },
                        validate: [{require: true, type: 'number', min: 10}]
                    },
                    {
                        type:'colorPicker',
                        title: '颜色',
                        field: 'color',
                        value: '#ff7271',
                        props:{
                            hue: true,
                            format: 'hex'
                        },
                        col:{
                            span: 12
                        }
                    },
                ]
            }
        ]
    }
]

 

form-create tutorial series:

form-create tutorials: remove the default submit button

form-create tutorial: to built-in components and custom components to add events

form-create Tutorial: custom layouts to achieve a plurality of line assemblies