element的el-time-select 下拉框位置偏移解决思路

el-time-select下拉框位置出现偏移的情况：窗口出现滚动条，如图：

出现问题的原因

el-time-select的下拉框是插入body中，且定位是filxd定位，出现滚动条后，基于窗口定位的下拉框就会出现如上图所示的位置偏移情况。

遇到的困难

在翻阅官方文档后发现el-time-select组件并没有el-select组件相同的popper-append-to-body属性，这也就说明el-time-select组件出现的位置偏移情况不能像el-select组件位置偏移情况一样去处理。

解决思路

使用了js来处理这个bug,代码如下：

一、我们在组件上添加获取焦点事件getTop，获取事件对象getTop($event)

<el-time-select
   @focus="getTop($event)"
   style="width:calc(70% / 2)"
   :editable="false"
   :picker-options="{
       start: '00:00',
       step: '00:15',
       end: '24:00',
    }">
el-time-select>

二、getTop函数内容如下

getTop(e){
    // 获取事件触发的元素距离可视窗口的顶部距离 + 元素自身的高度
   let top =  e.$el.getBoundingClientRect().top + 30 + 'px'
   // 之所以使用定时器是因为，元素渲染需要一点时间
   setTimeout(()=>{
       // 获取正在显示的下拉框
       let down = document.querySelector('div[x-placement]')
       // 设置定位为绝对定位（基于body）
       down.style.position = 'absolute'
       // 设置与顶部的距离
       down.style.top = top
       // 获取所有隐藏的下拉框
       let panel = document.querySelectorAll('.el-picker-panel')
       // 循环给所有隐藏下拉框更改样式
       for(var i =0;i<panel.length;i++){
           panel[i].style.position = 'absolute'
           panel[i].style.top = top
       }
    })
},

三、解决后的页面