解决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
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue2.0获取鼠标位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue中内置了很多的指令,但有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候我们就需要用到vue中一个很强大的功能了—自定义指令,这篇文章主要给大家介绍了关于vue中自定义指令（directive）的基本使用方法,需要的朋友可以参考下2021-09-09
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。2017-11-11
main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件,下面这篇文章主要给大家介绍了关于vue项目中main.js使用方法的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了Vue实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了vue.js开发环境的搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
electron+vue实现div contenteditable截图功能
这篇文章主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue项目设置活性字体过程(自适应字体大小)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue双向绑定原理及实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论