Group component

Array component function can be realized through group component

Example

Array

<template>
<div>
    <p>value: {{value.group}}</p>
    <form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                value:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'group',
                        field:'group',
                        title:'group',
                        value:[{field1:'aaa',field2:'sss'}, {field1:'aaa',field2:'sss'}],
                        props:{
                            rules: [
                                {type:'input', field:'field1',title:'field1'},
                                {type:'input', field:'field2',title:'field2'},
                            ]
                        }
                    },
                ]
            }
            
        }
    }
</script>

field example

<template>
<div>
    <p>value: {{value.group}}</p>
    <form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                value:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'group',
                        field:'group',
                        title:'group',
                        value:['aaa', 'aaa'],
                        props:{
                            rules: [
                                {type:'input', field:'field1',title:'field1'},
                            ],
                            field: 'field1'
                        }
                    },
                ]
            }
            
        }
    }
</script>

Configuration

props

property	Direction	Type	Default
rule	The rule of nested components	Object/Array	-
field	Only get this field in the sub-form, after setting, the value is Array\<field\> v2.5.0+	Number	-
min	Add at least a few items	Number	-
max	Add up to a few items	Number	-
expand	Expand several items by default	Number	-
button	Whether to show operation buttons	Boolean	-
options	Sub-form configuration	Object	-
fontSize	Action button font size	Number	28
disabled	Disable	Boolean	false

events

Event name	Description	return value
change	Triggered after the value changes	-
add	Trigger after adding an item	-
remove	Triggered after deleting an item	-
itemMounted	Triggered after the new sub-form is initialized	-
[field-emitName]	Subform emit event	-