返回 导航

其他

hangge.com

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

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

1,问题描述

(1)我们知道 Element UItable 表格组件支持固定列功能,只要在需要固定的列上添加 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 是创建一个 classel-scrollbar__wrapdiv 来获取滚动条宽度,那么我们只要将其也设置成同样的宽度样式即可。
/* 定义滚动条整体宽度 */
.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)

回到顶部