Element-UI el-table样式的调整和滚动条样式

最新推荐文章于 2025-07-14 14:26:56 发布

原创最新推荐文章于 2025-07-14 14:26:56 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

这篇博客介绍了如何使用/deep/选择器来深度定制Element-UI的表格样式，包括去除边框、改变行 hover 效果以及滚动条样式。示例代码详细展示了如何调整表格、组和边框的颜色，并提供了滚动条的宽度和颜色配置。对于需要精细化控制Element-UI组件样式的开发者来说，这是一个实用的参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-ui 的el-table 样式不是特别容易达到我们心里样式这时可以在css内用 `/deep/`属性

/deep/ .el-table--border .el-table__cell,
.el-table--group,
.el-table--border {
  border: 0.5px solid #464c61 !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #212e3e !important;
}

/deep/.el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent !important;
}
/* // 滚动条的宽度 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* // 滚动条的滑块 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}