antd-vue中的form表单label标签for导致点击文字触发输入框解决方案

Z时代
2024-01-10
分类：综合

vue

<a-form-item
    :label="label+'图片'"
    :label-col="{ span: 2 }"
    :wrapper-col="{ span: 22 }"
    id="picture"    // 只需加个与校验(roomPicture)不同名的id即可
>
<a-upload
    :action="'/platformApi/file/uploadFile'"
    :beforeUpload="beforeUpload"
    :data="dataObj"
    :disabled="type==='check'"
    :headers="headers"
    :showUploadList="false"
    @change="handleChange($event,'place')"
    listType="picture-card"
    name="multipartFile"
    v-decorator="['roomPicture',{rules: [{ required: true, message: '请选择房间图片' }]}]"
>
    <img
        :src="imageUrlForPlace"
        alt="avatar"
        style="max-width:400px;"
        v-if="imageUrlForPlace"
    />
    <div v-else>
        <a-icon :type="loadingForImgForPlace ? 'loading' : 'plus'" />
        <div class="ant-upload-text">Upload</div>
    </div>
</a-upload>
</a-form-item>