el-scrollbar 的使用方法 代码实现

el-scrollbar 是 Element UI 提供的滚动条组件，可以用于在需要滚动的容器中添加滚动条。

具体的使用方法如下：

1. 安装 Element UI

如果你还没有安装 Element UI，可以使用以下命令安装：

npm i element-ui -S

2. 引入 el-scrollbar 组件

在需要使用 el-scrollbar 的组件中引入 el-scrollbar 组件：

import { Scrollbar } from 'element-ui';

3. 在模板中使用 el-scrollbar

在模板中使用 el-scrollbar 组件，并将需要滚动的内容放在 el-scrollbar 的 slot 中：

<el-scrollbar style="height: 200px;">
  <div style="height: 400px;">
    <!-- 需要滚动的内容 -->
  </div>
</el-scrollbar>

其中，el-scrollbar 的 style 属性可以设置滚动条的高度，需要滚动的内容的高度超过 el-scrollbar 的高度时才会显示滚动条。

4. 自定义滚动条样式

如果需要自定义滚动条的样式，可以使用以下 CSS 样式：

.el-scrollbar__thumb {
  background-color: #409EFF;
}

.el-scrollbar__bar {
  background-color: #E4E7ED;
}

其中，.el-scrollbar__thumb 控制滚动条的颜色，.el-scrollbar__bar 控制滚动条轨道的颜色。

以上就是 el-scrollbar 的使用方法和代码实现。