如何解决固定列中的 div 元素无法超出边界的问题？

固定列中 p 的绝对定位超出边界问题

你在固定的列中放置了一个 class 为 popp 的 p，但它无法超出固定列，而是在超出部分被隐藏。即使取消该元素的 overflow:hidden 样式，问题依然存在。

解决方案

有一种简单的实现方法，就是直接使用 element plus 的 el-dropdown 下拉菜单组件，而不是通过 p 来实现自定下拉菜单。

<el-table-column class-name="fixcolumm" label="功能按钮" fixed="right"><template slot-scope="scope"><el-dropdown><el-button v-slot:dropdown slot="dropdown" type="primary">修改</el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item>修改111</el-dropdown-item><el-dropdown-item>修改111</el-dropdown-item><el-dropdown-item>修改111</el-dropdown-item><el-dropdown-item>修改111</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column>

登录后复制

这种方法比较方便，不需要修改 css 样式就能实现效果。

如果你坚持要使用自定 p 来实现，需要修改两个 css 类的超出隐藏：

.el-table__fixed {
  overflow-x: inherit;
}

.el-table__fixed-body-wrapper {
  overflow: inherit !important;
}

登录后复制

需要注意的是，使用自定组件可能会带来一些定制上的复杂性，因此建议优先考虑使用 el-dropdown 组件。

以上就是如何解决固定列中的 p 元素无法超出边界的问题？的详细内容，更多请关注抖狐科技其它相关文章！