form表单中碰到这种要求上传多张图片,但是只显示一个标签的情况:
- 先用一个大的FormItem展示标签,内部再写两个小的FormItem分别代表两张图片,同时为这两张图片配置表单验证规则
- 用css手动给大的FormItem标签画一个 * ,提示用户该项为必填项
完整代码:
<Form :model="form" :rules="rules" ref="formRule">
<FormItem label="证件照:" class="identify-picture">
<div style="display:flex;">
<FormItem prop="positive" class="positive-item">
<el-upload
class="positive-upload"
action="#"
:show-file-list="false"
:before-upload="(file) => handleBeforeUpload(file, 'positive')"
>
<img v-if="image1" :src="image1" class="positive-style">
</el-upload>
<h3>点击上传带头像一面</h3>
</FormItem>
<FormItem prop="back" class="back-item">
<el-upload
class="back-upload"
action="#"
:show-file-list="false"
:before-upload="(file) => handleBeforeUpload(file, 'back')"
>
<img v-if="image2" :src="image2" class="back-style">
</el-upload>
<h3>点击上传带国徽一面</h3>
</FormItem>
</div>
</FormItem>
</Form>
data(){
return{
form:{
positive: null,
back: null
},
formRule:{
positive:[
{ required: true, type:'object', message: '请上传证件照带头像一面', trigger: 'change' }],
back:[
{ required: true, type:'object', message: '请上传证件照带国徽一面', trigger: 'change' }]
}
}
}
<style>
// 手动绘制大标签前面的红色 "*"
.identify-picture::before{
position: absolute;
top: 10px;
left: 33px;
content:'*';
display: inline-block;
margin-right: 4px;
line-height: 1;
font-family: SimSun;
font-size: 12px;
color: #ed4014;
}
</style>