<template>
<div>
<h3>修改el-table滚动条样式</h3>
<h3>看下面css部分</h3>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
// start
.el-table {
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 4px; // 横向滚动条
height: 4px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(204, 208, 208); //颜色
border-radius: 2px; //圆角
}
}
// end
</style>
<style>
/* <!-- 去除le-table表格的hover效果
css代码: 如果不生效,就单独的放在一个style标签内,但是单独放会影响全局 --> */
/* 首先去除默认的hover效果 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: rgba(0, 0, 0, 0) !important;
}
</style>
修改el-table滚动条样式
最新推荐文章于 2024-08-19 16:43:01 发布
本文介绍如何在Vue项目中,针对el-table组件的滚动条进行样式定制,通过CSS选择器深入理解如何修改JavaScript和ECMAScript环境下元素的样式,提升表格的视觉效果。
摘要由CSDN通过智能技术生成