vue2+elementui的el-table固定列会遮住横向滚动条及错位问题解决方案
更新时间：2024年01月10日 10:00:02 作者：AzeShinja
这篇文章主要介绍了vue2+elementui的el-table固定列会遮住横向滚动条及错位问题解决方案,主要解决固定列错位后, 接下来就是把固定列往上提滚动条的高度就不会影响了,需要的朋友可以参考下
解决方案
我是最右侧固定列，所以下面的class名称是.el-table__fixed-right, 如果有左侧固定请自行替换为el-table__fixed
防止固定列表格高度错位
.el-table__fixed-body-wrapper {
.el-table__body {
padding-bottom: 15px; // 这个得自己调试看多少合适
}
}
}如果还没有解决错位， 请看你的
el-table__body-wrapper是不是自己写了max-height的样式属性， 这会影响固定列定位的
解决固定列错位后, 接下来就是把固定列往上提滚动条的高度就不会影响了
.el-table__fixed-right {
height: auto !important;
bottom: 8px !important;// 这个得自己调试看多少合适
}
//去掉固定列下方的横线， 样式优化
.el-table__fixed::before, .el-table__fixed-right::before {
display: none;
}解决效果如图：
留出了高度并且高度一致没有错位
问题完美解决！！！
到此这篇关于vue2+elementui的el-table固定列会遮住横向滚动条以及错位的文章就介绍到这了,更多相关vue2 elementui固定列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VUE PC端可拖动悬浮按钮的实现代码,通过实例代码介绍了父页面引用的方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现绘制饼图，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
Vue3是一款流行的前端框架,它支持多种传值方式,包括兄弟组件之间的传值,本文主要介绍了vue3+ts 兄弟组件之间传值的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了解决Vue 移动端点击出现300毫秒延迟的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了当启动vue项目安装依赖时报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文介绍了如何在Vue项目中配置多个静态文件目录,并提供了使用Vite和Webpack实现的示例,通过在vite.config.ts或vue.config.js中引入相关插件和配置,可以轻松实现自定义静态文件目录,希望这些内容对您有所帮助,感兴趣的朋友一起看看吧2025-01-01
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
这篇文章主要介绍了Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能,结合实例形式分析了vue.js前台商品分页、排序、筛选等功能及后台node.js处理技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项
这篇文章主要介绍了解决vite项目Uncaught Syntaxerror:Unexpected token＞vue项目上线白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
最新评论