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

解决过程

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

相关推荐
小陈同学,,8 小时前
el-table怎么显示 特殊单元格的值
前端·el-table
Aotman_17 小时前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6
serve the people1 天前
vue中将elementUI和echarts转成pdf文件
vue.js·elementui·echarts
tryCbest3 天前
Vue2集成ElementUI实现左侧菜单导航
前端·javascript·elementui
化作繁星4 天前
elementUI中MessageBox.confirm()默认不聚焦问题处理
前端·javascript·elementui
沉默是金~4 天前
Vue+Notification 自定义消息通知组件 支持数据分页 实时更新
javascript·vue.js·elementui
谁点的猪脚饭7 天前
vue2 element-ui 中 el-radio 单选框点击事件失效问题
vue.js·elementui·vue2
BillKu7 天前
Vue3父子组件数据双向绑定示例
javascript·vue.js·elementui
BillKu7 天前
遵守 Vue3 的单向数据流原则:父组件传递对象 + 子组件修改对象属性,安全地实现父子组件之间复杂对象的双向绑定示例代码及讲解
javascript·vue.js·elementui
Lin_熊米7 天前
仿 ElementUI 搭建自己的 vue 组件库
前端·vue.js·elementui