vue使用<el-table>时固定列导致滑动条问题

Posted 2023-05-03

参考技术A 问题：当使用表格组件时使用固定列记录数据，在滚动条拉到固定列下方时滚动条变为不可被拉动的状态

解决：

原理：单独设置了固定列的高度，使固定列不覆盖下凡滚动条，使其在任何情况下都可以被拉动，bottom属性可根据实际情况修改，设置为刚好在滚动条上方

转自： https://www.cnblogs.com/yanggb/p/13050638.html

el-table列固定后，列里面的元素没法选中

项目中用到了el-table组件，产品提了个需求，需要将表格最左侧的列全部固定

完成这个需求出现了一个bug

就是列中的元素没法选中 比如复选框没法勾选

后来经过调试发现，是由之前的人写的一行代码导致的

/*滚动条不灵活bug*/
/deep/ .el-table__fixed {
  pointer-events: none;
}

将代码注释掉则问题解决，但是滚动条确实会出现不灵活

解决方法

el-table__fixed的子元素添加样式

/*解决因为上一条样式引起的左侧固定列没法选中的问题*/
/deep/ .el-table__fixed-body-wrapper {
  pointer-events: all;
}