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

<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="data: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>
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案的更多相关文章
- vue使用elementUI form表单label样式修改
更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变,却又有一些不同,因为 initialValue又会因其他改动而改变. 然而当获取的数据重新上来要渲 ...
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- 使用Vue动态生成form表单
form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- Django 中的Form表单认证
一.Form表单 1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签 1.2 创建表单类Form 1. 创建 ...
随机推荐
- 网络通信引擎ICE的使用
ICE是一种网络通信引擎,在javaWeb的开发中可以用于解决局域网内部服务器端与客户端之间的网络通信问题.即可以在 1.在服务器和客户端都安装好ICE 2.服务器端(java)在java项目中引入I ...
- 『与善仁』Appium基础 — 23、操作滑动的方式
目录 1.swipe滑动 2.scroll滑动 3.drag拖拽事件 4.滑动方法小结 5.拓展:多次滑动 6.综合练习 在Appium中提供了三种滑动的方式,swipe滑动.scroll滑动.dra ...
- SQL Server 2014如何DATEDIFF()函数截取对应时间年月日
4.1 定义和用法: DATEDIFF()函数返回两个日期之间的时间 4.2 语法 DATEDIFF(datepart,startdate,enddate) datepart值: year | qua ...
- dart系列之:实时通讯,在浏览器中使用WebSockets
目录 简介 dart:html中的WebSockets 创建一个WebSocket WebSocket的状态 发送消息 处理WebSocket事件 总结 简介 web客户端和服务器端通信有两种方式,一 ...
- CF24B F1 Champions 题解
Content 有 \(n\) 场已经进行完的赛车比赛,每场比赛给出前 \(m\) 名的名字.在每场比赛中,前 \(10\) 名的选手分别可以获得 \(25,18,15,12,10,8,6,4,2,1 ...
- LuoguP4263 [Code+#3]投票统计 题解
Content 有 \(t\) 组询问,每组询问给定一个长度为 \(n\) 的数列,请将出现次数最多的数按照从小到大的顺序输出,或者这些数在数列中出现的次数都相等. 数据范围:\(t\) 未知,\(n ...
- libevent源码学习(13):事件主循环event_base_loop
目录开启事件主循环执行事件主循环校对时间 阻塞/非阻塞处理激活队列中的event事件主循环的退出event_base_loopexitevent_base_loopbreak开启事件主循环 ...
- TCP 两次握手为什么无法阻止历史连接?
摘要:在两次握手的情况下,「被动发起方」没有中间状态给「主动发起方」来阻止历史连接,导致「被动发起方」可能建立一个历史连接,造成资源浪费. 本文分享自华为云社区<TCP 两次握手为什么无法阻止历 ...
- 简单聊聊mysql的脏读、不可重复读
最近,在一次 mysql 死锁的生产事故中,我发现,关于 mysql 的锁.事务等等,我所知道的东西太碎了,所以,我试着用几个例子将它们串起来.具体做法就是通过不断地问问题.回答问题,再加上" ...
- IM服务器:编写一个健壮的服务器程序需要考虑哪些问题
如果是编写一个服务器demo,比较简单,只要会socket编程就能实现一个简单C/S程序,但如果是实现一个健壮可靠的服务器则需要考虑很多问题.下面我们看看需要考虑哪些问题. 一.维持心跳 为何要维持心 ...