element-ui时间选择器弹窗错位问题

问题描述

在vue项目中使用element-ui的多个时间选择器，通过其他变量实现多个时间选择器渲染，第一次选择时间没有问题，切换渲染之后所有下拉选项框全都出现在左上角，通过控制台查看样式属性发生变化，发生变化的原因未知（ps：这里描述的很清楚就不上图了，不明白的可以留言）。

解决办法

查找整理三个解决办法，如有其他方法欢迎补充。

1 强制修改样式

找到弹窗的样式类，通过!important强制修改弹窗的位置样式。（这种方法是我查到的，没有试过，觉得这样修改不太优雅，也不推荐）

2 修改v-if为v-show

修改条件渲染的方式将v-if改为v-show。（对比下一条一起分析）

3 为每个时间选择器加唯一的key值

个人猜测产生这种问题是因为时间选择器的下拉框的样式类重名导致的，当使用v-if切换元素时未达成条件的元素并没有渲染，当切换条件之后类名重名了但是元素变了找不到原来的元素就采用默认的样式类来渲染，而用v-show来切换虽然元素没有显示但是已经渲染了所以element为了区别二者会给每个选择器的下拉框加入唯一标识用以区别所以不会产生这种问题。所以当我们想要使用v-if判断时只需要手动的给每个选择器加入一个唯一标识就可以了如：key=''date''这样问题就解决了，这里比较一下方法2和3，假如我们的时间选择器超过两个方法2就会麻烦一些，所以还是推荐方法3 。

如有错误不足欢迎讨论指正。