在这里插入图片描述 设置包裹table组件标签flex:1
table高度设为100%

更改table默认滚动条

统一设置样式,在App.vue添加样式

		.el-table__body-wrapper::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		background-color: #ebeef5;
	}

	::-webkit-scrollbar-thumb {
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: #ebeef5;
	}

	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);
	}

对应界面设置样式

<style lang="scss">
	.el-table {
		/deep/ .el-table__body-wrapper::-webkit-scrollbar {
		    width: 10px; /*滚动条宽度*/
		    height: 10px; /*滚动条高度*/
		}
		/*定义滚动条轨道 内阴影+圆角*/
		/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
		    box-shadow: 0px 1px 3px rgba(0, 0, 0, .3) inset; /*滚动条背景区域的内阴影*/
		    border-radius: 10px; /*滚动条背景区域圆角*/
		    background-color: rgba(255, 255, 255, 1); /*滚动条背景颜色*/
		}
		/*定义滑块 内阴影+圆角*/
		/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
		    box-shadow: 0px 1px 3px rgba(0, 0, 0, .2) inset; /*滚动条的内阴影*/
		    border-radius: 10px; /*滚动条圆角*/
		    background-color: #ebeef5; /*滚动条的背景颜色*/
		}
	}
</style&gt;

原文地址:https://blog.csdn.net/u012761229/article/details/129184511

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22790.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注