vue3 element-plus el-table 滚动条默认强制显示

vue yekong

数据可视化大屏项目开发中,客户要求el-table滚动条强制显示, 要在Element Plus的el-table组件中强制显示滚动条,可以通过CSS样式来实现。由于浏览器默认情况下可能不显示滚动条,你可以通过设置滚动条的样式来使其始终显示。以下是一些可能的解决方案:

可以通过CSS来自定义滚动条的样式,使其始终显示。

/* 全局样式或组件的<style>标签中 */
//强制显示横向滚动条
.el-scrollbar__bar.is-horizontal {
  display: block !important;
}
//滚动条颜色
.el-scrollbar__thumb {
  background: #007dc1 !important;
  opacity: 1 !important;
}

//强制显示纵向滚动条
.el-scrollbar__bar.is-vertical {
  display: block !important;
}

请注意,这些方法主要针对Webkit内核的浏览器(如Chrome、Safari)。对于其他浏览器,可能需要添加额外的兼容性样式。

喜欢