给Element表格添加滚动条并修改滚动条样式

最新推荐文章于 2025-06-16 17:26:13 发布

lamCCH

最新推荐文章于 2025-06-16 17:26:13 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue css element组件文章标签： css css3 vue.js

本文链接：https://blog.youkuaiyun.com/chenlim87/article/details/123089727

vue 同时被 3 个专栏收录

25 篇文章

订阅专栏

css

17 篇文章

订阅专栏

element组件

8 篇文章

订阅专栏

本文详细介绍了如何使用CSS为表格添加固定高度、自动滚动和美观的滚动条效果，包括`::v-deep`选择器的应用以及滑块内阴影、圆角等视觉优化。

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

需求如题，添加CSS样式：

::v-deep .el-table__body-wrapper {
	height: 500px !important; /*给一个固定高度*/
	overflow-y: auto; /*y轴溢出显示滚动条*/
	&::-webkit-scrollbar {
		width: 4px; /* y轴滚动条宽度 */
        height:4px; /* x轴滚动条宽度 */
        background-color: #f5f5f5; /*滚动条背景*/
	}
}

/* 滑块内阴影+圆角 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.2);
}

/* 滚动条轨道内阴影+圆角 */
::-webkit-scrollbar-track {
	border-radius: 0;
	background: rgba(0, 0, 0, 0.1);
}

`::v-deep`是因为有scoped作用域