组件前缀后缀 v2.5.0+

通过生成规则的prefix属性配置组件的前缀,suffix属性配置组件的后缀

提示

自定义前缀后缀不支持表单组件

配置

• prefix string|VNodeData 设置组件的前缀
• suffix string|VNodeData 设置组件的后缀

示例

设置组件的前缀后缀

<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))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'text',
                        title:'text',
                        value:'default',
                        prefix:'prefix',
                        suffix:'suffix',
                    },
                    {
                        type:'timePicker',
                        field:'time',
                        title:'time',
                        value:'12:12:12',
                        prefix:'prefix',
                        suffix:'suffix',
                    }
                ]
            }
            
        }
    }
</script>

自定义组件的前缀后缀

<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))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'text',
                        title:'text',
                        value:'default',
                        prefix:{
                            type:'ElButton', children:['prefix'], props:{loading:true}
                        },
                        suffix:{
                            type:'ElButton', children:['suffix'], props:{loading:true}
                        },
                    },
                    {
                        type:'timePicker',
                        field:'time',
                        title:'time',
                        value:'12:12:12',
                        prefix:{
                            type:'ElButton', children:['prefix'], props:{loading:true}
                        },
                        suffix:{
                            type:'ElButton', children:['suffix'], props:{loading:true}
                        },
                    }
                ]
            }
            
        }
    }
</script>