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

学习文章要努力，但是不要急！今天的这篇文章《如何解决固定列中的 div 元素无法超出边界的问题？》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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

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

解决方案

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

<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 样式就能实现效果。

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

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

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

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

以上就是《如何解决固定列中的 div 元素无法超出边界的问题？》的详细内容，更多关于的资料请关注golang学习网公众号！