【记录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>

解决过程

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

相关推荐
Sterting4 天前
Form表单与校验
javascript·vue.js·elementui
Sterting5 天前
Element-Plus 入门与整体布局
前端·vue.js·elementui
yume_sibai6 天前
Element Plus 基础组件完全指南(12个核心组件)
前端·elementui
di24k24k12 天前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
森林的尽头是阳光24 天前
tree回显问题
javascript·vue.js·elementui
Bad_Shepherd25 天前
vue-element-plus-admin添加自定义svg图标,并且图标选择组件可选自定义图标
vue.js·elementui·前端框架
不甘平凡的小鸟1 个月前
Element-UI记录
javascript·vue.js·ui·elementui
chushiyunen2 个月前
vue el-pagination实现分页
javascript·vue.js·elementui
一坨阿亮2 个月前
使用e-tree开发树形穿梭框
javascript·vue.js·elementui
北极星日淘2 个月前
可买免税店货物与安耐晒——特殊商品代购技术方案
javascript·vue.js·elementui