设置组件的插槽

通过slot和children配置项的组合实现设置组件的插槽

默认插槽

设置组件的默认插槽

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    submitBtn:false,
                    resetBtn:false
                },
                rule:[
                    {
                        type:'el-button',
                        children:['方式1']
                    },
                    {
                        type:'el-button',
                        children:[{
                            type:'i',
                            class:'el-icon-check'
                        },' 方式2']
                    }
                ]
            }
            
        }
    }
</script>

指定插槽

给input组件通过prefix和suffix插槽设置前缀及后缀图标

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

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    submitBtn:false,
                    resetBtn:false
                },
                rule:[
                    {
                        type: 'input',
                        field: 'input',
                        title: '插槽',
                        children: [
                           {
                                type:'i',
                                class:'el-icon-check',
                                slot: 'prefix',
                           },
                           {
                                type:'i',
                                class:'el-icon-check',
                                slot: 'suffix',
                           },
                        ]
                    }
                ]
            }
            
        }
    }
</script>