element 使用date-picker选择器时出现跑偏到左上角错位

最新推荐文章于 2024-07-12 10:22:02 发布
最新推荐文章于 2024-07-12 10:22:02 发布
阅读量2.2k 收藏 4
点赞数 4
文章标签： elementui css vue.js DatePicker DatePicker 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mentalitys/article/details/122133459
版权
这篇博客讨论了在Vue应用中遇到的两个时间选择器切换时出现的显示错乱问题，并提供了两种解决方案：将`v-if`改为`v-show`，或者为`el-date-picker`指定不同的`key`属性来确保组件实例的唯一性。这有助于开发者在遇到类似问题时找到有效的应对策略。
摘要由CSDN通过智能技术生成

问题：使用两个时间选择器，切换错乱的问题

1.

 2.

 解决方法有两个
1.把v-if改成v-show
2.指定el-date-picker的key 用来区分
​​​​​​

 

blueBings
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
解决Element中el-date-picker组件不回填的情况
01-21
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填...
el-date-picker组件错位（溢出浏览器）解决
tang31415926的博客
02-18 6672
时间组件el-date-picker在弹窗中使用时，溢出页面，部分无法点击。
elementui时间选择器定位跑偏到左上角
weixin_44293690的博客
05-24 1238
elementui时间选择器定位跑偏到左上角
今日分享——elementUI时间选择器下拉框错位，跑到左上角问题解决方案。
2201_75842578的博客
07-12 332
项目中涉及多个表格切换打印功能，两个表格互相切换导致渲染不同的日期选择器，使用的是v-if进行控制渲染。切换到第二个表格是下拉选择器就出现位置错位。因为vue的渲染机制复用DOM导致，解决也很简单只需要给两个选择器各添加一个唯一的key值。key值可以让vue更好的追踪组建的状态和位置。
在el-dailog里面使用el-select和el-date-picker位置错乱问题
Ch_2018的博客
12-13 1055
2、在el-select里面添加:append-to-body="false"属性,如果不添加的话,我们查看元素会发现下拉框所在的div和el-select是不同级的,是在最外面,添加以后就可以在el-select的子级元素中看到了。2、在el-date-picker标签添加一个class， popper-class="time-date-picker"解决：1、同上类似 给el-date-picker标签添加属性:append-to-body="false"二、el-date-picker相关。
Vue element el-date-picker 时间组件类型切换报错，以及下拉框错位
weixin_47309568的博客
01-13 1851
javascript代码。template代码。
element中切换时间日期选择器时下拉框偏移到左上角的问题
HTML5_student的博客
01-21 1998
第一次点击都是正常的，但是第二次直接偏移到左上角。 解决方案： 在el-date-picker里面加上 key=“XXXX”即可
elementUI时间选择器时分秒无法对齐/滚动错位
Don't disturb me!的博客
03-30 1430
elementUI时间选择器时分秒滚动错位无法对齐问题修复
elementUI日期组件弹出错位
linggty的博客
05-09 5189
使用elementUI中的日期类组件时，如果在组件中使用了v-if则会导致日期弹出窗错位，将v-if改成v-show即可
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
其中，`el-date-picker`组件是一个非常实用的日期选择器，它可以轻松集成到各种表单中。但有时候开发者需要根据实际需求对日期选择范围做出限制，比如限制用户只能选择当天或之前的时间。 本文的核心知识点是探讨...
最全 element UI el-date-picker组件换色（less）
11-23
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
date-picker_date-picker_时间选择_
10-02
时间选择器，可以选择时间段内的时间，有效提高jsp代码
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
elementUI的时间日期选择器定位错乱
weixin_44416019的博客
07-22 5530
使用v-if切换时间选择器显示状态会出现定位错乱的情况，定位会跑到左上角（0,0,0,0） 换成v-show即可解决
解决element中动态切换时间日期选择器时下拉框偏移到左上角的问题
NICKDL的博客
09-15 872
正常第一次点击没有问题 点击切换按钮后，直接偏到姥姥家去了~ 解决办法是只需在组件中加个Key="xxx"即可 记录一下这个坑！
记录在vue开发上遇到的一些问题
weixin_43900374的博客
11-30 566
1.ElemetUI el-input 给v-model赋了默认值后不能编辑 2.使用多个el-date-picker导致弹窗位置偏移的问题 3.使用JSON.pase(JSON.stringiry())克隆一个对象，而新对象丢失原对象的函数问题 4.element el-form打开模态框时就进行表单验证的问题 5.使用deep深度监听一个对象时，赋值一个对象给被监听对象的元素会循环触发监听
使用多个el-date-picker导致弹窗位置偏移的问题
前端啤酒屋
01-27 3279
<el-form-item label='补算时间' prop="data_date" :rules="rules.validateRequire" v-if="!isSupply"> <el-date-picker v-if="type==='time'" v-model="model.data_date" type="daterange" value-format="yyyy-MM-dd" key="picker_time" plac
Element-ui中的el-date-picker 踩坑日记
weixin_47024018的博客
04-08 2453
问题描述 Element-Ui踩坑日记: 在使用el-date-picker组件的中出现多个日期的选择，会出现日历显示与选框不对齐； 问题分析： 因为这里模态框中存在多个el-date-picker组件，在切换的时候会出现组件没有注销还在进行，因为没有唯一的表示去绑定 原代码 <el-date-picker v-model="" type="daterange"
el-date-picker默认日期区间
anny_mei的博客
11-10 1064
在搜索部分引用 <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-
element-plus el-date-picker 实现季度选择器
最新发布
08-01
Element Plus 的 `el-date-picker` 组件本身并不直接提供季度选择的功能。然而，你可以通过自定义日期范围或者结合组件的 API 来实现季度选择。下面是一个简单的示例： 1. 首先，你需要确定开始和结束日期之间的季度边界，例如一月、四月、七月和十月是一季度。 2. 使用 Element Plus 的 `el-date-picker` 组件，可以设置默认值为当前季度的开始日期，并禁用日期选择功能，只允许用户选择年份。 ```html <template> <el-date-picker v-model="quarterStart" type="daterange" start-placeholder="选择开始月份" end-placeholder="选择结束月份" :picker-options="{ disabledDate: disabledDate }" ></el-date-picker> </template> <script> export default { data() { return { quarterStart: { start: moment().startOf('quarter').toDate(), end: moment().endOf('quarter').toDate() } }; }, methods: { disabledDate(date) { // 确保用户无法选择超出当前季度的日期 if (date < this.quarterStart.start || date > this.quarterStart.end) { return true; } return false; } } }; </script> ``` 3. 用户可以选择起始日期，然后组件会自动更新结束日期到当季度的末尾。如果需要用户手动输入结束日期，可以在点击按钮后打开 `el-date-picker` 并清除默认值。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值