自定义组件示例

下面以element-ui为例, 例举一些常用组件的生成方法

生成一个标签页

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                     submitBtn: false
                },
                rule:[
                    {
                        type:'el-tabs',
                        props:{
                            value: 'tab1'
                        },
                        children:[
                            {
                                type:'el-tab-pane',
                                props:{
                                    label:'tab1',
                                    name:'tab1'
                                },
                                children:['tab1 content']
                            },
                            {
                                type:'el-tab-pane',
                                props:{
                                    label:'tab2',
                                    name:'tab2'
                                },
                                children:['tab2 content']
                            },
                            {
                                type:'el-tab-pane',
                                props:{
                                    label:'tab3',
                                    name:'tab3'
                                },
                                children:['tab3 content']
                            },
                        ]
                    }
                ]
            }
            
        }
    }
</script>

生成一个按钮

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                     submitBtn: false
                },
                rule:[
                    {
                        type:'el-button',
                        props:{
                            loading: true
                        },
                        children:['一个加载按钮']
                    }
                ]
            }
            
        }
    }
</script>

生成一个折叠面板

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    submitBtn: false
                },
                rule:[
                    {
                        type:'el-collapse',
                        props:{
                            value: 'item1'
                        },
                        children:[
                            {
                                type:'el-collapse-item',
                                props:{
                                    title:'item1',
                                    name:'item1'
                                },
                                children:['item1 content']
                            },
                            {
                                type:'el-collapse-item',
                                props:{
                                    title:'item2',
                                    name:'item2'
                                },
                                children:['item2 content']
                            },
                            {
                                type:'el-collapse-item',
                                props:{
                                    title:'item3',
                                    name:'item3'
                                },
                                children:['item3 content']
                            },
                        ]
                    }
                ]
            }

        }
    }
</script>