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

解决过程

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

相关推荐
进阶的小木桩1 天前
Vue 3 + Elementui + TypeScript 实现左侧菜单定位右侧内容
vue.js·elementui·typescript
北辰浮光4 天前
[Element-plus]动态设置组件的语言
javascript·vue.js·elementui
胡斌附体4 天前
elementui cascader 远程加载请求使用 选择单项等
前端·javascript·elementui·cascader·可独立选中单节点
小离a_a6 天前
el-tree方法的整理
前端·vue.js·elementui
code_txy7 天前
element plus table 表格操作列根据按钮数量自适应宽度
elementui
阿奇__7 天前
深度修改elementUI样式思路
前端·vue.js·elementui
什么什么什么?10 天前
el-table高度自适应vue页面指令
前端·javascript·elementui
海天胜景11 天前
vue3 el-table 去除小数 并使用千分号
javascript·vue.js·elementui
肖恩想要年薪百万11 天前
ElementUI常用的组件展示
前端·javascript·elementui
像素之间14 天前
elementui中rules的validator 用法
前端·javascript·elementui