解决element-ui table设置列fixed时X轴滚动条无法拖动问题
更新时间：2023年10月20日 08:47:48 作者：长安_APTX
这篇文章主要介绍了解决element-ui table设置列fixed时X轴滚动条无法拖动问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题原因
table的列设置fixed后，element框架在渲染时会再生成一个table，宽度为所有固定列之和，这个固定列的table将原有table的滚动条遮盖了。
解决方法
方法一
改变固定列table的高度
// 做法一： 直接设置固定列table的高度：表格高度 - 滚动条高度
/deep/ .el-table__fixed {
height:calc(100% - 6px) !important;
}
// 做法二：设置固定列table的高度自适应，并设置bottom
/deep/ .el-table__fixed {
height:auto !important; // 为保证样式不错乱，让固定列的高自适应
bottom:6px !important; // 不遮盖滚动条，留出滚动条的高度（6px为预估高度，不设置高度只设置bottom无效，原样式中的top属性权重更高，可设置top为auto,再设置bottom，但这样表格上部分会被hidden，影响整体样式）
}
方法二
改变层级（推荐）
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
z-index: 1;// 框架已设置该元素定位为relative
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目两种方式实现竖向表格的思路分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
Vue中的el-date-picker时间选择器的使用实例详解
el-date-picker是Element UI框架中提供的日期选择器组件,它支持单个日期、日期范围、时间、日期时间等多种选择方式,本文给大家介绍Vue中的el-date-picker时间选择器的使用,感兴趣的朋友一起看看吧2023-10-10
在我们的日常开发当中,很多时候会出现短时间内重复请求的情况,如果没有妥当地处理后果很严重,这篇文章主要给大家介绍了关于web开发中如何优雅的解决重复请求问题的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue3+vite+ts如何配置多个代理并解决报404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要为大家详细介绍了vue实现视频上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了Vue页面跳转传递参数及接收方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论