vue el-table 滚动条样式

要自定义Vue的el-table中的滚动条样式，你可以使用以下方法：

1. 使用CSS样式：你可以通过在你的项目中添加自定义的CSS样式来修改滚动条的外观。例如，你可以使用以下样式修改滚动条的颜色和宽度：

/* 水平滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #999; /* 设置滚动条颜色 */
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条背景颜色 */
}

/* 垂直滚动条 */
.el-table__body::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}

.el-table__body::-webkit-scrollbar-thumb {
  background-color: #999; /* 设置滚动条颜色 */
}

.el-table__body::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条背景颜色 */
}

2. 使用自定义的Vue组件：你可以创建一个自定义的滚动条组件，并将其应用到el-table中。这样你就可以完全控制滚动条的样式和行为。以下是一个简单的示例：

<template>
  <div class="custom-scrollbar">
    <div class="scrollbar-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomScrollbar',
}
</script>

<style scoped>
.custom-scrollbar {
  overflow: auto;
  height: 200px; /* 设置滚动区域的高度 */
}

.scrollbar-content::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}

.scrollbar-content::-webkit-scrollbar-thumb {
  background-color: #999; /* 设置滚动条颜色 */
}

.scrollbar-content::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置滚动条背景颜色 */
}
</style>

然后，在使用el-table时，将内容放在自定义滚动条组件中：

<template>
  <el-table>
    <!-- 其他table配置 -->
    <template v-slot:default>
      <custom-scrollbar>
        <!-- el-table的内容 -->
      </custom-scrollbar>
    </template>
  </el-table>
</template>

<script>
import CustomScrollbar from './CustomScrollbar.vue'

export default {
  components: {
    CustomScrollbar,
  },
}
</script>

这样，你就可以根据自己的需求来定制el-table的滚动条样式了。