# 组件前缀后缀 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>