el-table__body-wrapper &::-webkit-scrollbar修改滚动条颜色

你可以使用以下 CSS 代码来修改 el-table__body-wrapper 中的滚动条颜色：

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

上述代码将会让滚动条变宽，并且设置了一个灰色的滚动条拇指，同时设置了一个淡灰色的滚动条轨道。你可以根据需要修改颜色和其他属性。请注意，这些样式只会在支持 WebKit 引擎的浏览器中有效，在其他浏览器中可能会有所不同。

相关问题

elementUI el-table如何使用el-scrollbar自定义样式

在 elementUI 的 el-table 中使用 el-scrollbar 自定义样式，可以通过以下步骤实现：

1. 在组件中引入 el-scrollbar 组件：

import ElScrollbar from 'element-ui/lib/scrollbar';

2. 在 el-table 组件中使用 scoped slot，给 table 的 body-wrapper 增加一个自定义的滚动条：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="300px"
    :header-cell-style="{background: '#f5f7fa', color: '#909399', fontWeight: 'bold'}"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <template slot="body-wrapper" slot-scope="{ row, $index }">
      <el-scrollbar wrap-class="scrollbar-wrap">
        <table>
          <tbody>
            <tr v-for="(item, index) in row" :key="index">
              <td>{{ item }}</td>
            </tr>
          </tbody>
        </table>
      </el-scrollbar>
    </template>
  </el-table>
</template>

3. 在样式表中自定义滚动条的样式：

.scrollbar-wrap {
  /* 设置滚动条宽度和高度 */
  width: 100%;
  height: 100%;

  /* 设置滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
  }
}

el-table scrollbar样式

el-table组件的滚动条样式可以通过在样式中设置特定的CSS属性来实现。根据引用中的代码，可以使用以下CSS样式定义el-table的滚动条样式:

.el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 横向滚动条宽度
height: 6px; // 纵向滚动条高度
必写
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd; // 滚动条滑块背景颜色
border-radius: 3px; // 滚动条滑块边框圆角
}

根据引用中的代码，也可以使用以下CSS样式定义el-table的滚动条样式:

.tableListValue::-webkit-scrollbar {
width: 2.1vh; // 纵向滚动条宽度
height: 2.1vh; // 横向滚动条高度
}

.tableListValue::-webkit-scrollbar-thumb {
background: #ccc; // 滚动条滑块背景颜色
border-radius: 1vh; // 滚动条滑块边框圆角
}

.tableListValue::-webkit-scrollbar-track {
background: rgba(#ccc,0.3); // 滚动条背景颜色
}

除了以上两种方式，根据引用中的代码，还可以在其他地方添加滚动条样式，例如:

.overflow-y-scroll {
overflow-y: scroll; // y轴溢出显示滚动条
}

.overflow-y-scroll::-webkit-scrollbar {
width: 0.3vw; // 纵向滚动条宽度
height: 0.1vh; // 横向滚动条高度
}

.overflow-y-scroll::-webkit-scrollbar-track {
background: transparent; // 滚动条背景颜色
}

.overflow-y-scroll::-webkit-scrollbar-thumb {
background: #4bc1ff; // 滚动条滑块背景颜色
border-radius: 0.8vh; // 滚动条滑块边框圆角
}

以上就是el-table组件滚动条样式的几种定义方式，你可以根据自己的需求选择适合的方式进行样式设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>