el-scrollbar:Element UI隐藏组件。
注意事项:
1.el-scrollbar的父层要有固定高度
2.el-scrollbar的高度要设成100%
3.如果出现横滚动条,添加overflow-x:hidden;
问题分析
通过阅读源码,
scrollbar
组件暴露了native
,wrapStyle
,wrapClass
,viewClass
,viewStyle
,noresize
,tag
这7个 props属性
props: {
native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
wrapStyle: {}, // 包裹层自定义样式
wrapClass: {}, // 包裹层自定义样式类
viewClass: {}, // 可滚动部分自定义样式类
viewStyle: {}, // 可滚动部分自定义样式
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: { // 生成的标签类型,默认使用 `div`标签包裹
type: String,
default: 'div'
}
}
注:
wrapStyle和viewStyle必须以分号;结尾。
代码示例
<el-scrollbar
wrap-class="list" wrap-style="overflow-x:hidden;"
view-class="view-box" view-style="font-weight: bold;height:100%;"
:native="false">
<el-tree
class="tree"
:data="menuItems"
node-key="id"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
>
</el-tree>
</el-scrollbar>
评论
还没有任何评论,你来说两句吧!