【记录52】el-table-column 添加fixed属性 滚动条无法滑动

问题: el-table-column 添加fixed属性 滚动条无法滑动

使用element UI组件,用到el-table的el-table-column的fixed属性时,当滚动条长度小于固定列时,滚动条无法通过鼠标去点击滑动操作

原因

fixed是用来固定列的属性,其的展现层级会高于滚动条的层级,因此会导致该问题,但使用z-index层级是无法起到效果的

解决方案

css 复制代码
<style>
/* 设置默认高度-滚动条高度 */
.el-table__fixed {
  height: calc(100% - 15px) !important;
}
/* 用于消除固定列下方的伪元素边框线 */
.el-table__fixed:before {
  height: 0px;
}
</style>

解决过程

查找了很多资料,有的方法是可行的,有的不可行,可行的有的样式太多了,该方法用极短的样式就可以解决,笔者亲测有效

相关推荐
LoveEate15 小时前
vue 在el-tabs动态添加添加table
javascript·vue.js·elementui
krifyFan15 小时前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
一颗努力的大土豆15 小时前
关于解决switch开关属性中active-value=“1“为数值形失败的问题
javascript·vue.js·elementui
Liu.77415 小时前
vue3 中实现 Element Plus 表格合并
javascript·vue.js·elementui
SevgiliD15 小时前
解决使用 fixed固定列时el-table导致纵向滚动条问题
前端·vue.js·elementui
dreams_dream1 天前
Vue树选择
javascript·vue.js·elementui
dreams_dream2 天前
树形表格示例
javascript·vue.js·elementui
蓝胖子的多啦A梦12 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
wangbing112513 天前
界面规范11-对话框
javascript·vue.js·elementui