element-ui的日期组件定位不准,fixed问题

已于 2022-04-21 11:12:13 修改
阅读量1k 收藏 1
点赞数
分类专栏： 随手笔记 文章标签： elementui vue.js
于 2022-04-21 11:08:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dwz_zz/article/details/124316509
版权 
需求: 日期range 和 单个picker下拉框根据条件切换使用

问题：日期picker选择器 切换的时候跑到了页面的左上角，原因是组件根据fixed定位，更改position无用。

解决方法：各方查阅，给date组件加上key，特此记录

Dwz_zz自用问题笔记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决element-ui的时间选择器选择的时间传入后端有时区问题和时间异常的问题
123
07-05 6015
解决element-ui的时间选择器选择的时间传入后端有时区问题和时间异常的问题**异常说明****解决方法****效果说明** 异常说明 前端页面选择的时间为: 2020-07-28 00:00:00 element-ui传入后端的数据为 2020-07-27T16:00:00:000Z，存在时区问题，并且有时候传输到后台的日和前端选择的日期一致，从而导致了存储的时间出现偏差 解决方法 _this.resourceapplication.requiredTimeOfReadiness = documen
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，...这个“element-ui.rar”压缩包就是你开始使用 Element UI 的起点，解压后可以查看其内部结构，进一步学习和了解每个组件的用法。
elementUI中日期组件定位不对的解决办法
AillenRen的博客
08-11 2654
今天遇到个用elementUI写表单时遇到的情况。 需求是表单需要根据下拉框筛选时，出现日期选择器，并且改日期需要校验。 理所当然的使用 v-if 形式，然后出现因为切换显示时，日期的picker 选择器跑到了屏幕左上角，看了下之后发现组件用的是 fixed 定位。所以根本不用考虑加 relative了。 网上查了下，一片都是云~~ 套个div 加 relative 或者 if 换成 show的。 我在极度愤怒的情况下连续删除了多次代码，并且准备删库跑路的时候，试了下给组件加 key,然后就可以了（狗头）
el-date-picker的使用，及解决切换type时面板样式错乱问题
qq_53857666的博客
05-30 624
el-date-picker的使用
elementUI的时间日期选择器定位错乱
weixin_44416019的博客
07-22 5510
使用v-if切换时间选择器显示状态会出现定位错乱的情况，定位会跑到左上角（0,0,0,0） 换成v-show即可解决
elementui表格添加fixed之后样式异常
weixin_55553106的博客
06-30 1122
最近写项目碰到一个bug 大概就是一个表格组件两个页面都会使用 组件中表格的某些列就用v-if控制了 表格的首尾列都用了fixed 然后就发生了bug 如下图 具体原因不明 看过很多网上的办法 有在fixed的列绑定key的 也有使用doLayout()的 测了都没用 最后在一个前端交流群里一位大佬给出的办法 实测有效 .el-table__header, .el-table__body, .el-table__footer { width: 100%; tab
element中el-date-picker时间选择位置调整
qq_48854247的博客
03-10 3814
el-date-picker样式修改
el-select选择器或date-picker,time-picker日期选择的下拉选项框点开时，点击浏览器返回上一步后，显示在上一个网页左上角【ElementUI】
qq_38686683的博客
04-06 2444
element中下拉框打开，点击上一步，当路由变化时，下拉框会停留在当前页面左上角的问题解决
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
以上就是关于vue-cli3.0+element-ui上传组件el-upload的使用介绍。通过自定义这些属性和钩子函数，我们可以灵活地控制文件上传的过程，满足各种业务场景的需求。在实际开发中，还可以结合axios等HTTP库进行更复杂的...
vue+element-ui DateTimePicker组件分钟设置步长step
05-17
DateTimePicker是Element-UI中用于日期和时间选择的组件，它结合了DatePicker和TimePicker的功能，允许用户在同一个界面上选择日期和时间。在某些场景下，我们可能需要自定义时间选择的精度，例如，我们不希望用户...
vue element-ui table 组件封装使用
最新发布
06-07
以下是对“vue element-ui table 组件封装使用”这一主题的详细讲解。 首先，我们来看标题中的“vue element-ui table 组件封装”。封装意味着将通用的功能集中到一个单独的模块或组件中，使得在多个地方重复使用时...
element ui datePicker弹出偏移
c45449210的博客
03-25 1415
引用我的询问帖： https://bbs.csdn.net/topics/399142266 我在里面做了详细的描述。
element-ui 使用多个时间选择器 造成弹窗错位问题
TingLisu的博客
08-12 1761
功能需求：客户按照想要的方式 来选择适合的日期，最后定下来需要用到 3种 不同的时间选择器 1. 月 选择器 2. 日 选择器 3. 范围 选择器 然后 我就通过一个 select 来让用户选择 用它的 value 来判断让哪个时间选择器显示出来。 最后发现 其中又得选择器会错位 他的css样式 解决办法 1 通过css样式强制修改。（未尝试） 2 我用的 v-if 来判断显隐 可能因为样式名的关系，造成位置错乱。换成 v-show 解决问题。（亲测可食用） 3 ...
elementUi时间插件显示错位
weixin_42057810的博客
03-12 563
特此记录，之前antd也遇到过一次，想用同样的方法但el的datepicker不支持getPopupContainer。 各种搜索都是改v-if为v-show，但是这样我的表单验证就会比较麻烦，在一个帖子下面看到的回答说给组件加上key，经试验可行。帖子找不到了，感谢这位大佬！ 我自己理解的话，应该是用v-if它生成dom的时候有多个时间插件，它自己也分不清，加了key相当于生成VNode的时候给了唯一标识，自然就不会错位了。不知道对不对，如果有人看到了并且知道的话希望能给我留个言告诉我原理，谢谢了 .
antd vue关于日期组件的一些坑
weixin_47309568的博客
08-21 2135
v-mode绑定值和default-value默认值绑定空字符串会提示错误需要是null或者moment对象使用要下载moment对象以及引入 <a-date-picker v-model="Time" :default-value="Time" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" /> import moment from "moment"; export default{ data(){ retur
element-ui 时间控件使用v-if导致控件错位
mf_717714的博客
01-21 805
这个并不算Element的bug，你在v-if与v-else中使用了同一种Component，这两个Component属性也基本一致，所以Vue会复用之前的组件，但Vue中应该避免复用自定义的复杂的组件，很容易出问题，这也是v-for内必须加入key的原因。 这个issue就是复用组件时没有把内部引用的this.$refs.reference修改过来，计算popover的位置出错。 解决的方法是在两个DatePicker上加上key属性，明确告知Vue这是两个不同的组件，避免组件的复用
elementUI的时间选择器-选择日期范围，选择时间后获取时间的格式问题
热门推荐
bamboozjy的博客
08-04 1万+
选择日期范围: value-format="yyyy-MM-dd" //加上这行代码，不然获取的时间格式用不了 &lt;el-date-picker v-model="shop" value-format="yyyy-MM-dd"//非常重要，不然获取的时间格式用不了 format="yyyy-MM-dd"...
element-puls 使用 el-date-picker 弹出框位置错位
weixin_52806502的博客
06-27 947
鼠标滚动 弹出框随着移动 同理项目里有些 el-select 弹出框也是这样的。
封装element-ui下拉框组件
04-29
好的，下面是封装element-ui下拉框组件的步骤： 1. 创建一个基于element-ui下拉框组件的自定义下拉框组件。 2. 在组件中设置props参数，用于接收下拉框的数据源。 3. 使用el-select组件，通过v-for指令对下拉框的选项进行循环遍历，并将每一项的value和label值与props参数进行绑定。 4. 设置组件的v-model属性，用于双向绑定选中的下拉框项的值。 5. 为组件设置事件监听器，通过emit()方法向父组件传递选中的下拉框项的值。 以上就是封装element-ui下拉框组件的基本步骤，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值