element ui 时间筛选样式遮盖问题修复

代码搬运媛

已于 2024-03-27 09:45:13 修改

阅读量1.6k

点赞数

分类专栏： VUE专栏文章标签： vue.js elementui 前端

于 2022-11-04 10:01:33 首次发布

本文链接：https://blog.csdn.net/sinat_33255495/article/details/127682824

版权

VUE专栏专栏收录该内容

63 篇文章 5 订阅

订阅专栏

element ui 时间筛选样式遮盖问题修复：

正常情况下通过添加一个属性即可解决：

<el-date-picker
  v-model="endDate"
  @change="selectDateDamage"
  type="month"
  ref="timeBox" // 这个属性是为下一步清除焦点做准备
  format="yyyy-MM"
  value-format="yyyy-MM"
  :append-to-body="true" // 只需增加这个属性就好
  :picker-options="pickerOptions"
>
</el-date-picker>

但是这次需求的是通过 tab 切换同时切换 el-date-picker,第一次初始化时是成功了，但每当点击 tab 就会重现上述遮盖问题。

经过排查发现，tab 切换时时间筛选的焦点没有消失，导致绑定到 body 失败。此时我们只需清除焦点即可。