RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。
2021/6/7 10:51:19
本文主要是介绍RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这个属于iview组件的问题,被RadioGroup包裹的多个Radio选项,默认每个Radio选项的click事件均是单击事件,所以像日期选择器这种需要点击多次来
选择开始或者结束时间的功能组件放在Radio选项里就会有冲突。
解决方案: Radio选项框里放置一个空的div,将DatePicker放在Radio外层实现相关布局和功能。
<FormItem label="有效期: " prop="interests"> <RadioGroup v-model="formOther.interests" @on-change="interestsRadioChange" size="large"> <Row class="radioRow datepickerRadio"> <Radio label="1" :disabled="isDetail"> <span></span> </Radio> <span> <DatePicker class="search-value" v-model="formOther.dateTime" :disabled="isDetail || formOther.interests !== '1'" :editable='false' type="daterange" placement="bottom-start" format="yyyy-MM-dd HH:mm:ss" @on-change="dateTimeChange" placeholder="开始日期 至 结束日期"></DatePicker> </span> </Row> <Row class="radioRow"> <Radio label="0" :disabled="isDetail"> <span class="radioText">领券当日起</span> <Input placeholder="请输入" class="inputStyle" :disabled="isDetail || formOther.interests !== '0'" @on-blur="validInput('currentDay')" v-filterinput="{reg:regExp.num}" v-model="formOther.currentDay"> </Input> <span class="radioText">天内可用</span> </Radio> </Row> <Row> <Radio label="2" :disabled="isDetail"> <span class="radioText">领券次日起</span> <Input placeholder="请输入" class="inputStyle" :disabled="isDetail || formOther.interests !== '2'" @on-blur="validInput('nextDay')" v-filterinput="{reg:regExp.num}" v-model="formOther.nextDay"> </Input> <span class="radioText">天内可用</span> </Radio> </Row> </RadioGroup> </FormItem>
这篇关于RadioGroup里使用DatePicker的时候,日期选择器选择了开始日期时日期下拉选框会直接消失,选不了结束日期。的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享