Vue3-elementplus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色（详细示例代码，解决样式覆盖失败问题）_el-table滚动条宽度

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; /* 滑块圆角 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

完整的代码

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50