数组组件

可以通过group组件实现数组组件功能

示例

数组

<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:{
                            defaultValue: {field1:'field1',field2:'field2'},
                            rules: [
                                {type:'input', field:'field1',title:'field1'},
                                {type:'input', field:'field2',title:'field2'},
                            ]
                        }
                    },
                ]
            }
            
        }
    }
</script>

field示例

<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>

配置

props

属性	说明	类型	默认值
rule	嵌套组件的规则	Object/Array	-
defaultValue	设置子表单的默认值	Object	-
field	只获取子表单中此字段, 设置后,值为Array\<field\> v2.5.0+	Number	-
min	最少添加几项	Number	-
max	最多添加几项	Number	-
expand	默认展开几项	Number	-
button	是否显示操作按钮	Boolean	-
options	子表单配置	Object	-
fontSize	操作按钮字体大小	Number	28
disabled	禁用	Boolean	false
syncDisabled	与子表单强制同步 disabled 状态	Boolean	true
onBeforeAdd	新增时前置回调,返回false时取消操作	Function	-
onBeforeRemove	删除时前置回调,返回false时取消操作	Function	-

on 事件

事件名	说明	返回值
change	value 发生变化后触发	-
add	增加一项后触发	-
remove	删除一项后触发	-
itemMounted	新增的子表单初始化完成后触发	-
[field-emitName]	子表单 emit 事件	-