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

最新推荐文章于 2025-03-10 10:39:04 发布

原创最新推荐文章于 2025-03-10 10:39:04 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #vue.js

vue 同时被 3 个专栏收录

25 篇文章

订阅专栏

css

17 篇文章

订阅专栏

element组件

8 篇文章

订阅专栏

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

需求如题，添加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作用域