vue elementUI table表格自定义样式滚动

在Vue中使用Element UI的Table组件时，如果需要自定义滚动样式，可以通过CSS覆盖默认样式来实现。以下是一个简单的例子，展示如何自定义Element UI Table的滚动条样式。

首先，在你的Vue组件的<style>标签中添加自定义样式：

/* 自定义滚动条的样式 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  height: 6px; /* 设置滚动条高度 */
}
 
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px; /* 滚动条圆角 */
  background: rgba(0,0,0,.2); /* 滚动条颜色 */
}
 
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); /* 滚动条轨道阴影 */
  background-color: #f0f0f0; /* 滚动条轨道颜色 */
}

确保你的Element UI Table组件被包裹在一个具有el-table__body-wrapper类的元素内部，这样上述样式才能正确应用。

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...你的数据
      ]
    };
  }
};
</script>

这样，你就可以为Element UI的Table组件添加自定义滚动条样式了。请注意，这里的CSS是针对Webkit内核浏览器（如Chrome和Safari）的滚动条样式覆盖。对于其他浏览器，可能需要不同的CSS规则。