element el-table 设置fixed导致行错乱问题

最新推荐文章于 2024-07-23 15:23:30 发布

六卿

最新推荐文章于 2024-07-23 15:23:30 发布

阅读量4k

点赞数 3

文章标签： vue.js elementui 前端 table fixed

本文链接：https://blog.csdn.net/qq_43291759/article/details/132831076

版权

文章讲述了在VueElementUI的el-table中，当左右列被设置为fixed时，由于底部滚动条的存在导致行未对齐的问题。解决方案是通过设置el-table的padding-bottom属性与滚动条高度相同，确保表格布局正确。

摘要由CSDN通过智能技术生成

首先看有问题的样式：
在这里插入图片描述
解决：

// 解决左右 对不齐 的情况
// el-table 左右有列固定时，fixed为left和right时，行未对齐解决办法
// * 产生原因： el-table底部有滚动条，固定列底部没有滚动条
// * 解决办法： 在el-table的表格中设置padding-bottom的内边距跟滚动条等高
/deep/.el-table__fixed,
/deep/.el-table__fixed-left,
/deep/.el-table__fixed-right {
  // 10 是我这里全局定义的滚动条的高度
  height: calc(100% - 10px) !important;
}

/deep/.el-table__fixed-body-wrapper {
  height: 100% !important;
}

/deep/.el-table__fixed-body-wrapper .el-table__body {
  /*滚动条高度*/
  // 10 是我这里全局定义的滚动条的高度
  padding-bottom: 10px !important;
}