用scss 怎么给element-plus中的el-tree加纵向滚动条
时间: 2024-02-18 17:01:41 浏览: 111
Element-ui之ElScrollBar组件滚动条的使用方法
5星 · 资源好评率100%
可以通过以下步骤给 element-plus 中的 el-tree 加纵向滚动条:
1. 使用 `::v-deep` 将样式深入到 el-tree 组件中,这样可以覆盖 element-plus 的默认样式。
2. 为 el-tree 的容器元素设置固定的高度,开启 overflow-y 属性,从而实现纵向滚动条。
3. 为 el-tree 设置一个自定义的样式类名,以便于在 SCSS 中引用。
下面是示例代码:
```scss
// 引入 element-plus 的样式
@import "~element-plus/packages/theme-chalk/src/index.scss";
// 自定义 el-tree 的样式
.my-tree {
// 将样式深入到 el-tree 组件中
::v-deep {
// 为容器元素设置固定高度,并开启纵向滚动条
.el-tree__empty-block,
.el-tree__children {
height: 200px;
overflow-y: auto;
}
}
}
```
在 HTML 中使用自定义样式类名:
```html
<el-tree class="my-tree"></el-tree>
```
这样就可以给 el-tree 加纵向滚动条了。
阅读全文