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)