el-table scrollbar样式
时间: 2023-11-07 09:47:54 浏览: 98
el-table组件的滚动条样式可以通过在样式中设置特定的CSS属性来实现。根据引用中的代码,可以使用以下CSS样式定义el-table的滚动条样式:
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 横向滚动条宽度
height: 6px; // 纵向滚动条高度
必写
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd; // 滚动条滑块背景颜色
border-radius: 3px; // 滚动条滑块边框圆角
}
根据引用中的代码,也可以使用以下CSS样式定义el-table的滚动条样式:
.tableListValue::-webkit-scrollbar {
width: 2.1vh; // 纵向滚动条宽度
height: 2.1vh; // 横向滚动条高度
}
.tableListValue::-webkit-scrollbar-thumb {
background: #ccc; // 滚动条滑块背景颜色
border-radius: 1vh; // 滚动条滑块边框圆角
}
.tableListValue::-webkit-scrollbar-track {
background: rgba(#ccc,0.3); // 滚动条背景颜色
}
除了以上两种方式,根据引用中的代码,还可以在其他地方添加滚动条样式,例如:
.overflow-y-scroll {
overflow-y: scroll; // y轴溢出显示滚动条
}
.overflow-y-scroll::-webkit-scrollbar {
width: 0.3vw; // 纵向滚动条宽度
height: 0.1vh; // 横向滚动条高度
}
.overflow-y-scroll::-webkit-scrollbar-track {
background: transparent; // 滚动条背景颜色
}
.overflow-y-scroll::-webkit-scrollbar-thumb {
background: #4bc1ff; // 滚动条滑块背景颜色
border-radius: 0.8vh; // 滚动条滑块边框圆角
}
以上就是el-table组件滚动条样式的几种定义方式,你可以根据自己的需求选择适合的方式进行样式设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
阅读全文