Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式,覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等(提供详细示例代码,解决各种样式覆盖失败问题))
写在前面
网上的都是vue2 教程或者老文章不然就是提供的浏览器样式的修改,对vue3表格无效,本文针对Vue3 Element Plus el-table修改滚动条样式。
效果图
对浏览器默认的样式修改
/* 修改滚动条轨道 */
::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
}
/* 修改滚动条轨道背景 */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道背景颜色 */
}
/* 修改滚动条滑块 */
::-webkit-scrollbar-thumb {
background: #888; /* 滑块颜色 */
}
/* 设置滚动条边框 */
::-webkit-scrollbar-thumb {
border-radius: 5px; /* 滑块圆角 */
}
对 el-table 的滚动条修改核心代码
<style lang="scss">
.el-scrollbar {
.el-scrollbar__bar.is-horizontal {
height: 14px; // 添加横向高度
}
.el-scrollbar__bar.is-vertical {
width: 14px; // 添加纵向宽度
}
// 横向滚动条
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1; // 默认滚动条自带透明度
height: 14px; // 横向滑块的宽度
border-radius: 2px; // 圆角度数
background-color: rgba(136, 219, 255, 1); // 滑块背景色
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
}
// 纵向滚动条
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
opacity: 1;
width: 14px; // 纵向滑块的宽度
border-radius: 2px;
background-color: rgba(136, 219, 255, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
</style>
完整的代码
<template>
<el-table :data="tableData" border style="width: 50%" height="650px">
<el-table-column fixed prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="state" label="State" width="120" />
<el-table-column prop="city" label="City" width="320" />
<el-table-column prop="address" label="Address" width="600" />
<el-table-column prop="zip" label="Zip" width="120" />
</el-table>
</template>
<script setup>
const tableData = [];
const obj = {
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
};
for (let i = 0; i < 100; i++) {
tableData.push(obj);
}
</script>
<style lang="scss">
/* ---el-table滚动条公共样式--- */
.el-scrollbar {
.el-scrollbar__bar.is-horizontal {
height: 14px;
}
.el-scrollbar__bar.is-vertical {
width: 14px;
}
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1;
background-color: rgb(231, 227, 4);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
opacity: 1;
background-color: rgb(228, 214, 19);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
}
</style>