前端 - Element UI el-date-picker选择面板被遮挡的原因及解决方案是什么？

Question

在table中使用了一个el-date-picker，日期选择面板被遮挡，无法选择日期。

Answer 1

给 <el-date-picker> 元素添加 append-to-body 属性，让他挂载到 body 尾部就行了。

#Attributes - DatePicker 日期选择器 - 组件 | Element

Answer 2

Element UI el-date-picker 选择面板被遮挡的原因及解决方案

原因

Element UI 的 el-date-picker 组件在选择日期时，会弹出一个浮动的面板供用户选择日期。当这个组件被用于一些具有复杂布局或特定样式的场景（如表格 table 内），可能会遇到选择面板被遮挡的问题。这通常是由于以下几个原因造成的：

1. 父级容器的 overflow 属性：如果 el-date-picker 的父级容器设置了 overflow: hidden; 或其他值，那么超出父级容器范围的元素可能会被隐藏。
2. z-index 值较低：选择面板的 z-index 值可能低于其他页面元素，导致被遮挡。
3. 绝对定位与相对定位：el-date-picker 的选择面板使用了绝对定位，但如果其父级或祖先级元素也使用了定位（如相对定位或固定定位），可能会导致定位上下文的变化，从而影响选择面板的显示。
4. 其他 CSS 样式冲突：如 transform、opacity、visibility 等 CSS 属性也可能影响选择面板的显示。

解决方案

1. 调整父级容器的 overflow 属性：检查并修改 el-date-picker 父级容器的 overflow 属性，确保其不会隐藏弹出的选择面板。如果必须保留 overflow 属性，可以考虑将 el-date-picker 移到不会受到 overflow 影响的区域。
2. 增加选择面板的 z-index 值：通过自定义 CSS 类或使用 Element UI 的相关属性来增加选择面板的 z-index 值，确保其高于其他页面元素。
3. 检查并调整定位属性：确保 el-date-picker 的父级和祖先级元素没有使用可能影响定位的属性（如 position: relative;）。
4. 检查并调整其他 CSS 样式：确保没有其他 CSS 样式影响了选择面板的显示。可以尝试禁用或修改与 el-date-picker 选择面板显示相关的 CSS 规则。
5. 使用 Element UI 的 append-to-body 属性：el-date-picker 组件支持一个 append-to-body 属性，当设置为 true 时，选择器会被渲染到 body 下，这样可以避免选择器被其他元素遮挡。

示例代码（使用 append-to-body 属性）：

<el-date-picker
  v-model="date"
  type="date"
  placeholder="选择日期"
  append-to-body
></el-date-picker>