この記事では、カスタムレイアウトを形成し、作成するために、ラインの複数のアセンブリを達成する方法について説明します

フォームの作成動的なレンダリング、データの収集、検証を生成し、フォームビルダ機能を提出することができますJSONを。VUEとは、任意のコンポーネントの生成をサポート。一般的に使用されるフォームコンポーネントおよびカスタムコンポーネントの内蔵の17種類と組み合わせることで、より複雑なフォームが簡単に引き出せることができます。

それはあなたを助けている場合、あなたができる GitHubのを支持体上に、「スター」のポイントへありがとうございました！

生成規則を提供することにより、colコンフィギュレーション項目のレイアウト・コンポーネントを実装することができます

例1：

[ 
    { 
        タイプ： '入力' 、
        フィールド： 'テスト1' 、
        タイトル： 'COL-12' 、
        値： '' 、
        COL：{ 
            スパン： 12 
        } 
    }、
    { 
        タイプ： '入力' 、
        フィールド：「試験- 2' 、
        タイトル： 'COL-12' 、
        値： '' 、
        COL：{ 
            スパン： 12 
        } 
    } 
]

例2：

例で使用されているElementUI

設定されていない場合はcol、デフォルト時にで{span:24}

[ 
    { 
        タイプ： 'EL-列' 、
        ネイティブ：真、
        子供：[ 
            { 
                タイプ： 'EL-COL' 、
                小道具：{ 
                    スパン： 12 
                }、
                子供：[ 
                    { 
                        タイプ： '日付ピッカー' 、
                        タイトル： '活动日期' 、
                        フィールド： 'section_day' 、
                        値：[ '2018年2月20日午前12時12分12秒'、 '2018年3月20日午前12時12分12秒']、
                        小道具：{ 
                            タイプ： 'dateTimeRange' 
                        } 

                    }、
                    { 
                        タイプ： 'TimePicker' 、
                        タイトル： 'アクティブ時間' 、
                        フィールド： 'section_time' 、
                        値：[ '11：11 :. 11」、'22：22である：22です] 、
                        小道具：{ 
                            isRange：trueに、
                            プレースホルダ： "時間を選択します"
                        } 

                    }、
                ] 
            }、
            { 
                タイプ： 'EL-COL' 、
                小道具：{ 
                    スパン： 12 
                }、
                子供：[ 
                    { 
                        タイプ： 'inputNumber' 、
                        タイトル： '排序' 、
                        フィールド： 'ソート' 、
                        値： 0 、
                        小道具：{ 
                            精度： 2 
                        }、 
                        COL：{ 
                            スパン： 12 
                        }、
                        検証：[{必要：真、タイプ： '番号'、最小：10 }] 
                    }、
                    { 
                        タイプ： 'のColorPicker' 、
                        タイトル： '颜色' 、
                        フィールド： '色' 、
                        値： '＃ff7271の' 、
                        小道具：{ 
                            色相：真、
                            フォーマット： "進」 
                        }、 
                        COL：{ 
                            スパン： 12 
                        } 
                    } 
                ] 
            } 
        ] 
    } 
]

チュートリアルシリーズのフォーム作成します。

チュートリアルをフォーム作成：デフォルトでは、送信ボタンを削除

チュートリアルをフォームが作成：組み込みコンポーネントおよびカスタムコンポーネントにイベントを追加します

フォームの作成チュートリアル：行の複数のアセンブリを達成するためにカスタムレイアウトを

この記事では、カスタムレイアウトを形成し、作成するために、ラインの複数のアセンブリを達成する方法について説明します

チュートリアルシリーズのフォーム作成します。

おすすめ