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

在Vue3和Element Plus中，要设置表格的横向滚动条样式，并覆盖默认的表格固件，可以通过CSS来实现。以下是一个简单的例子，展示如何自定义滚动条的样式：

1. 首先，在你的Vue组件中定义一个带有滚动条的表格：

<template>
  <el-table :data="tableData" height="200" class="custom-scrollbar-table">
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
 
const tableData = ref([
  // 数据列表
]);
</script>
 
<style>
/* 自定义滚动条样式 */
.custom-scrollbar-table::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条宽度 */
  height: 10px; /* 水平滚动条高度 */
}
.custom-scrollbar-table::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条颜色 */
  border-radius: 10px; /* 滚动条圆角 */
}
.custom-scrollbar-table::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 滚动条轨道颜色 */
}
</style>

2. 在上述代码中，.custom-scrollbar-table 是一个自定义的类，用于给表格添加自定义的滚动条样式。
3. ::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 是CSS伪元素，用于定义滚动条的样式。

请注意，这些样式是针对Webkit内核浏览器（如Chrome和Safari）的。对于其他浏览器，可能需要不同的伪元素或其他方法来自定义滚动条。

这个例子展示了如何设置滚动条的宽度、颜色和圆角，你可以根据需要调整这些样式。