element-plus 如何修改el-table 捲軸高度，el-table捲軸放置在表格外面

一文搞懂發表於2024-09-19

先上效果圖：

實現方式，自定義全域性的element樣式如下：

/**
*  表格捲軸
*/

// 橫向捲軸高度
$scrollbarheight: 15px;
.el-scrollbar {
  //偏移
  .el-scrollbar__bar{
    bottom: 1px;
  }

  //高度
  .el-scrollbar__bar.is-horizontal{
    height: $scrollbarheight;
  }
  
  // 橫向捲軸
  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    // opacity: 1; // 預設捲軸自帶透明度
    height: $scrollbarheight ; // 橫向滑塊的寬度
    border-radius: 5px; // 圓角度數
    // background-color: var(--el-color-primary-light-4); // 滑塊背景色
    // box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑塊陰影
  }
  // 縱向捲軸
  .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
  //   opacity: 1;
    width: 8px; // 縱向滑塊的寬度
  //   border-radius: 2px;
  //   background-color: rgba(136, 219, 255, 1);
  //   box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
}



/**
*  奇葩需求：表格捲軸需要放置在表格外部！！！
*  由於表格父容器overflow: hidden;因此無法透過abslute定位來解決,
*  目前的解決辦法是從表格行中摳出部分高度，修改原有邊框的高度，
*/
//設定 表格行總高度
.el-scrollbar {
  .el-scrollbar__wrap{
    height: calc(100% - $scrollbarheight) !important;
  }
}
//清除表格左邊框 
.el-table__border-left-patch {
  height: 0px;
}
//縮短表格左邊框 
.el-table--border:before{
  height: calc(100% - $scrollbarheight) !important;
}
//縮短表格右邊框
.el-table--border:after{
  height: calc(100% - $scrollbarheight) !important;
}
//清除 表格下邊框
.el-table__inner-wrapper:before {
  height: 0px;
}
//新增表格下邊框
.el-scrollbar .el-scrollbar__wrap {
  border-bottom: 1px solid var(--el-table-border-color);
}

相關文章