返回 导航

其他

hangge.com

Vue.js - 解决Element UI表格固定列高度显示异常问题（自定义滚动条样式引发）

作者：hangge | 2024-12-31 08:35

1，问题描述

（1）我们知道 Element UI 的 table 表格组件支持固定列功能，只要在需要固定的列上添加 fixed 属性即可，该功能在通常情况下一切正常。

（2）由于默认的滚动条样式比较不美观，我们可能会通过全局样式对表格的滚动条样式进行修改，特别是减小了滚动条的宽度（使其变细）。
<style>
  /* 定义滚动条整体宽度 */
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
  }
  /* 滚动条滑块样式 */
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #31ab9d; /* 滑块颜色 */
    border-radius: 4px; /* 圆角 */
    border: 2px solid transparent; /* 给滑块加点空白边距 */
    background-clip: content-box; /* 内边距裁剪 */
  }

  /* 滚动条轨道样式 */
  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 轨道背景色 */
    border-radius: 4px; /* 圆角 */
  }
</style>

（3）这时会发现左侧或者右侧的固定列高度会出现异常，下方出现一段空隙：

2，问题原因

（1）这是因为 Element UI 在计算固定列的高度时，会先获取滚动条宽度，然后减去滚动条宽度。
（2）而具体算法可以查看 node_modules\element-ui\src\utils\scrollbar-width.js 源码，通过自动创建一个隐藏的带滚动条的 div 来获取滚动条宽度。
import Vue from 'vue';

let scrollBarWidth;

export default function() {
  if (Vue.prototype.$isServer) return 0;
  if (scrollBarWidth !== undefined) return scrollBarWidth;

  const outer = document.createElement('div');
  outer.className = 'el-scrollbar__wrap';
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.position = 'absolute';
  outer.style.top = '-9999px';
  document.body.appendChild(outer);

  const widthNoScroll = outer.offsetWidth;
  outer.style.overflow = 'scroll';

  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);

  const widthWithScroll = inner.offsetWidth;
  outer.parentNode.removeChild(outer);
  scrollBarWidth = widthNoScroll - widthWithScroll;

  return scrollBarWidth;
};

（3）由于我们只修改了表格的滚动条宽度，而这个 div 的滚动条宽度没有变化，从而造成计算后的高度不适合。

3，解决办法

（1）由于 Element UI 是创建一个 class 为 el-scrollbar__wrap 的 div 来获取滚动条宽度，那么我们只要将其也设置成同样的宽度样式即可。
/* 定义滚动条整体宽度 */
.el-scrollbar__wrap::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}
/* 滚动条滑块样式 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #31ab9d; /* 滑块颜色 */
  border-radius: 4px; /* 圆角 */
  border: 2px solid transparent; /* 给滑块加点空白边距 */
  background-clip: content-box; /* 内边距裁剪 */
}

/* 滚动条轨道样式 */
.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 轨道背景色 */
  border-radius: 4px; /* 圆角 */
}

（2）修改后可以看到固定列区域显示正常了：
评论

全部评论（0）

回到顶部