有兴趣可关注公众号 毛毛虫的小小蜡笔，不定时更新前端等文章信息。
问题
测试发现一个偶现的bug，第一次打开调度配置的页面，点击具体时间是能选择时间的，但关闭后打开其他配置页面，再回来打开调度配置的页面，发现点击具体时间没反应。
如下截图所示：
文章图片
分析
一开始以为是调度配置页面组件的状态问题。
因为具体时间是用了第三方组件，页面组件是通过v-show方式来显示隐藏的。所以再次打开后，可能没把状态处理好。
但验证的过程中，突然想到一个问题：第三方组件应该不会有这么低级的bug，还是先看看它的时间选择div节点在不在。
结果，具体时间虽然点击没反应，但时间选择的div节点还是在的，只是页面上看不到而已！
原来是el-drawer的层级太高，把时间选择div节点覆盖了！
但为啥第一次打开调度配置页面就没问题，后面就被覆盖了呢？
原来是element ui的el-drawer，没打开一次，z-index都会+1。。。
第一次打开，如下截图所示：
文章图片
文章图片
第二次打开，如下截图所示：
文章图片
第三次打开，如下截图所示：
文章图片
解决
目前解决方式就是加个important，覆盖element ui的z-index。
.mx-datepicker-popup {
z-index: 2999 !important;
}另外，el-dialog弹窗和其他浮窗貌似也有该问题。
疑问 为啥element ui的z-index会自增呢？
看了下源码，没具体说明什么原因。
如下截图所示：
文章图片
文章图片
文章图片
【解决element ui的z-index问题】然后到github上看了下，发现一开始就这样设计的。
如下截图所示：
文章图片
最后
- 有兴趣可关注公众号 毛毛虫的小小蜡笔，不定时更新前端等文章信息。
- 文章有疑问和问题，请留言。
- 如果觉得文章还可以，请点赞或收藏，谢谢。
推荐阅读
- 解决element ui的button没自动失焦的问题
- vue|解决element-ui中select下拉框popper超出弹框问题
- 记录使用elementUI设置主题遇到的坑
- 在table列表中通过按钮移除某条数据
- 处理 element-UI 中table表格多选框判断是否禁用问题
- el-table表格拖动列记住列宽度功能（刷新页面还在）
- element-ui|如何对 el-table列表项 内的 form表单元素 使用 自定义规则校验
- el-button type=text 文字按钮 边框去除和添加
- vue|vue el-upload 组件上传的 文件跟随表单数据 发送后台保存