form-create教程:自定義布局,實現一行多個組件

本文將介紹form-create如何自定義布局,實現一行多個組件

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。並且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。

如果對您有幫助，您可以在 GitHub 上給作者點個"Star" 支持一下 謝謝！

 

通過設置生成規則的col配置項可以實現組件的布局

示例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
        }
    }
]

 

示例2:

示例中使用的是 ElementUI

當沒有設置col時默認為{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'],
                        props:{
                            type:'datetimerange'
                        }

                    },
                    {
                        type:'timePicker',
                        title: '活動時間',
                        field: 'section_time',
                        value: ['11:11:11', '22:22:22'],
                        props:{
                            isRange: true,
                            placeholder: "請選擇活動時間"
                        }

                    },
                ]
            },
            {
                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教程系列:

form-create教程:移除默認提交按鈕

form-create教程:給內置組件和自定義組件添加事件

form-create教程:自定義布局,實現一行多個組件