解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

现象： 解决方法 ： 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处 在使用ElementUI这一流行的Vue.js组件库时，开发者可能会遇到一些特定的问题，特别是在涉及到表格（Table）组件时。本文将详细解析如何解决“切换Tab后，el_table的固定列下方多了一条线”的问题，以及如何处理ElementUI Table组件在屏幕尺寸临界时固定列显示不全的常见问题。 让我们深入理解这个问题的现象。当用户在应用中切换Tab时，可能发现ElementUI的el_table组件中，固定列（即固定在左侧或右侧以便在滚动时始终保持可见的列）下方莫名其妙地出现了一条额外的线。这条线通常不是预期的样式效果，它可能会影响到用户的界面体验。 针对这个问题，有两种主要的解决方法： 1. **修改全局CSS**： 这种方法适用于项目中全局都需要调整el_table固定列的样式的情况。可以在全局CSS文件中添加以下代码： ```css .el-table__fixed { height: 100% !important; } ``` 使用`!important`确保此样式优先级高于其他内联样式，以覆盖可能导致问题的默认样式。 2. **只修改局部CSS**： 如果只想对特定表格应用此修复，可以给表格添加一个自定义类，然后在CSS中使用/deep/选择器来穿透组件并设置样式。例如，如果表格类名为`tableClass`，可以这样写： ```css .tableClass /deep/ .el-table__fixed { height: 100% !important; } ``` `/deep/`选择器（在某些版本的Vue.js中也可能是`>>>`）用于穿透单个组件的样式隔离，允许我们直接操作子组件的内部样式。 除了上述问题，ElementUI的Table组件还存在另一个问题，即在屏幕尺寸刚好能够完全显示表格时，固定列可能会显示不全。这是因为当表格的宽度达到临界值，固定列的高度没有自动适应，导致出现垂直滚动条，固定列的高度小于实际需要的高度。 要解决这个问题，关键在于正确设置固定列的高度。在检查元素工具中，我们可以发现固定列的DOM元素具有预设的宽度和高度。当我们将这个元素的`height`属性更改为`100%`时，固定列的显示问题会得到解决。然而，由于固定列的DOM结构与表格主体分离，直接通过组件的CSS类来设置样式可能无效。 为了有效地修改固定列的高度，我们需要利用/deep/选择器，结合表格的自定义类。例如，给table组件添加一个`table-fixed`类，然后在CSS中进行如下设置： ```css .table-fixed /deep/ .el-table__fixed-right { height: 100% !important; } ``` 这样，即使ElementUI动态生成了包含哈希值的子组件，我们也能确保正确地调整固定列的高度，避免出现显示不全的情况。 处理ElementUI Table组件的问题需要深入理解其内部DOM结构和CSS样式规则。通过精确的CSS选择器和适当的样式覆盖，我们可以有效地解决固定列的显示异常，确保用户界面的一致性和美观性。在日常开发中，遇到类似问题时，熟练掌握这些技巧将大大提升开发效率。