vue+Elementui el-table表格 3行代码解决固定列错位问题

666 阅读1分钟

** 情况发生在表格数据超过展示范围,需要滚动查看情况下,下拉到尽头后表格发生错位,错位情况如下: e75033cc6969915965e0bb5678e3722.jpg

查看浏览器样式后,分析是因为列固定后,固定列的table标签分离出去,导致左侧未固定列el-table__body-wrapper及右侧固定列样式的padding属性不一致导致的。

在页面上直接修改el-table__fixed-right、el-table__fixed-body-wrapper的padding样式,发现均无法起到效果,增加的内边距均作用于更外层的div下,于是继续深入修改更小粒度的元素类样式,最后在el-table__fixed-body-wrapper下的el-table__body类添加内边距样式可达成效果,相当于把固定列抬高的方式修复,效果如下:

fe1a768ec52698301d9158cf8d44a2f.jpg

/deep/ .el-table__fixed-body-wrapper{
    .el-table__body{
        padding-bottom: 17px !important;// 边距宽度根据自身情况调节  
    }  
}

至于本身水平滚动条全白导致滚动条不可见的问题可以通过重设表格滚动条样式完成,此处不过多赘述