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

解决过程

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

相关推荐
Jay丶萧邦5 小时前
el-select:有关多选,options选项值不包含绑定值的回显问题
javascript·vue.js·elementui
我爱学习_zwj6 小时前
后台管理系统-月卡管理
javascript·vue.js·elementui
是你的小熊啊12 小时前
解决elementUi el-select 响应式不生效的问题
前端·vue.js·elementui
一个小开心呀17 小时前
点击表格的最后一行的下拉框,会出现横向滚动条
前端·vue.js·elementui
Smile_Gently2 天前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
BillKu2 天前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
DCTANT2 天前
【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能
前端·javascript·vue.js·elementui·typescript
CiL#3 天前
el-table已经选中的项,通过selectable属性不可以再次选择
javascript·vue.js·elementui
ew452183 天前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
m0_526119403 天前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui