问题:使用elementUI的表格组件,表格同时开启合计、多选、固定列时,合计行遮挡滚动条,导致滚动条无法拖动
原因:合计行使用了position: absolute进行固定位置,设置了之后层级会比其他元素高,故而遮挡底下的内容。而出现错位的原因是由于合计行使用定位元素后脱离原来的文档流
解决方法:调整固定列和表头的point-event
- pointer-events 的基本信息
- pointer-events 属性用来控制一个元素能否响应鼠标操作,常用的关键字有 auto 和 none
- pointer-events: none; 让一个元素忽略鼠标操作
- pointer-events: auto; 还原浏览器设定的默认行为
//取消fixed列的鼠标事件
.el-table__fixed, .el-table__fixed-left, .el-table__fixed-right {
pointer-events: none;
td {
pointer-events: auto;
}
}
//重置表头,防止全选点击事件失效
.el-table__header{
pointer-events: auto;
}