Component prefix suffix v2.5.0+

The prefix of the component is configured by the prefix property of the generated rule, and the suffix of the component is configured by the suffix property

Warn

Custom prefix suffix does not support form components

Configuration

• prefix string|VNodeData Set the prefix of the component
• suffix string|VNodeData Set the suffix of the component

Example

Set the prefix and suffix of the component

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

Prefix and suffix for custom components

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