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

解决过程

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

相关推荐
周不凢2 天前
elementui el-date-picker分页选择弹出框样式及分页样式
elementui
周不凢2 天前
elementui el-date-picker时间区间选择弹出框样式
elementui
桧***攮3 天前
DockerGraphQLAPI
elementui·rust·visual studio
滿4 天前
vue3 elementplus el-table toggleRowSelection使用方法
javascript·vue.js·elementui
鹤鸣的日常6 天前
Vue + element plus 二次封装表格
前端·javascript·vue.js·elementui·typescript
dy17178 天前
el-table表头上下显示内容
javascript·vue.js·elementui
一只小阿乐11 天前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
humors22112 天前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
阿奇__12 天前
el-table有固定列时样式bug
vue.js·elementui·bug
是大林的林吖15 天前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui