解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
现象：
解决方法 ：
1.修改全局css
2.只修改局部css
.你的tableClass{
/deep/ .el-table__fixed {
height: 100% !important; //设置高优先，以覆盖内联样式
}
}
补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题
在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。
如上图所示，现在表格下方是未出现水平滚动条的，处于表格宽度刚好够显示所有字段的临界值，固定列出现了高度变小的情况，导致显示不全。
上图为检查元素找到的固定列的DOM元素，固定列的DOM元素是独立于表格body的，所有在开发代码中，给该列设置任何class或style是无法添加在固定列这个DOM元素上的。从这个DOM元素可以看到style元素设置了width和height，这个元素是ElementUI生成表格时，生成的DOM元素，且设置了宽高。
从Chrome检查元素，修改height为100%时，可以看见固定列显示不全的问题就已解决。
所以，解决方案就放在设置这个固定列的height上了。
从DOM树上看到，table组件还有哈希值的。（vue的每个组件有一个对应的哈希值），而固定列上是没有哈希值的，所以固定列是不在我们编码的单个组件上的，而是把table看作一个子组件，而固定列就在table这个子组件上，直接通过class选择器修改子组件的css样式是没用的，要通过\deep\修饰。
最后，通过给table设置calss：table-fixed
再通过css选择器进行样式穿透
.table-fixed {
/deep/ .el-table__fixed-right {
height: 100% !important; //设置高优先，以覆盖内联样式
}
}
这样就解决了这个问题。
以上这篇解决elementUI 切换tab后 el_table 固定列下方多了一条线问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue基于mint-ui的城市选择3级联动的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本文主要介绍了Vue中使用Element的Table组件实现嵌套表格,通过type="expand"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容,感兴趣的可以了解一下2024-01-01
vue如何使用vant组件的field组件disabled修改默认样式
这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue之定义全局工具类问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在Vue中循环生成表格数据时,可能会遇到数据联动的现象,即修改一个表格中的数据后,其他表格的数据也会跟着变化,这种现象通常是因为所有表格的数据引用了同一个对象或数组导致的,本文介绍vue中循环表格数据出现数据联动现象,感兴趣的朋友一起看看吧2024-11-11
有不少的前端需求都需要使用到富文本编辑器,所以这篇文章主要来和大家介绍一下如何在Vue3项目中使用富文本编辑器,感兴趣的可以了解下2024-04-04
在Vue应用中,弹窗是一个常见的交互元素,有时我们可能希望用户点击弹窗外部时,弹窗能够自动关闭,本文主要介绍了Vue点击在弹窗外部实现一键关闭的示例代码,感兴趣的可以了解一下2024-06-06
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
这篇文章主要介绍了Vue 使用 Mint UI 实现左滑删除效果CellSwipe,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文主要介绍了 Element基于el-input数字范围输入框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论