vue.js - el-table-column的selection选项框穿透div，一直处于上层如何解决？

Question

请教一下大家，el-table-column的 selection 选项框穿透能否解决？它一直在最上层，用div无法掩盖。如图一是本来的样子，图二是底下div展开后的样子。

表格

<el-table :data="tableData.slice((tablePage.pageNum-1)*tablePage.pageSize,tablePage.pageNum*tablePage.pageSize)" border>   <el-table-column type="selection" width="55"></el-table-column>      <el-table-column v-for="item in header"         :prop= "item.prop"         :label= "item.label"         :key= "item.prop"         :min-width="item.width"      >   </el-table-column> </el-table>

div展开截图

<div v-if="bottomActive" style="width: 100%;">    <el-table :data="tableData" border style="width: 100%; margin-top: 10px" height="300" >     <el-table-column type="selection" width="55"></el-table-column>     <el-table-column v-for="item in header"           :prop= "item.prop"           :label= "item.label"           :key= "item.prop"           :min-width="item.width"       >       </el-table-column>    </el-table></div>

Answer 1

这个问题可能是由于 CSS 的 z-index 属性造成的。el-table 和 el-table-column 组件可能被设置为了 z-index 值，使得 selection 选项框在其 DOM 结构中处于较高层级，从而覆盖了其他元素。

一个可能的解决方案是尝试通过设置 div 的 z-index 值来改变其堆叠顺序。你可以尝试增大或减小此值以调整元素的堆叠顺序。例如，你可以尝试在 div 元素上设置 z-index: 1; 或其他适当的值。

如果上述方法不起作用，你可能需要检查你的 CSS 以确定是否有其他因素（如 transform 或 opacity）可能导致元素的渲染顺序出现问题。

请注意，上述解决方案都是基于你提供的信息进行的猜测，实际解决方案可能需要你进行更深入的调试和排查。