Vue ElementUI 可滚动的样式配置

13 min read

在 Vue ElementUI 中，可通过以下几种方式来配置可滚动的样式：

  1. 在 el-scrollbar 组件上使用自定义样式。
<el-scrollbar style="max-height: 200px;">
  ...
</el-scrollbar>
  1. 通过将 el-scrollbar 组件嵌套在 el-card 或 el-table 等容器组件中来实现样式配置。
<el-card style="height: 200px;">
  <el-scrollbar>
    ...
  </el-scrollbar>
</el-card>
  1. 自定义主题中定义滚动条样式。

可以在自定义主题的样式文件中定义滚动条的样式，例如下面代码中的 Vue ElementUI 官方定义的滚动条样式：

.el-scrollbar__thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.el-scrollbar__wrap.touch {
  transition: transform .3s;
}

通过以上三种方式，可以轻松地配置 Vue ElementUI 中可滚动组件的样式。