目录el-scrollbar滚动条初始化不显示el-scrollbar:Element UI隐藏组件滚动条初始化消失的问题问题分析el-scrollbar滚动条初始化不显示 当使用e
当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动,见下图
所以解决办法是在获取到列表的时候,调用一下update方法
查看源码的时候,因为scrollBar有一个update方法,所以调用这个方法可以解决
<el-scrollBar ref="scrollDiv"></el-scrollBar>
...
// 异步获取列表之后
this.nextTick(() => {
//解决滚动条初始化消失的问题
this.$refs.scrollDiv.update()
})
注意事项:
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'
}
}
代码示例
<el-scrollbar
wrap-class="wraplist"
ref="scrollDiv"
wrap-style="overflow-x:hidden;"
view-class="viewclass"
view-style="font-weight: bold;height:100%;"
:native="false"
>
</el-scrollbar>
setTimeout(() => {
this.$refs.scrollDiv.update()
}, 0)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 关于el-scrollbar滚动条初始化不显示的问题及解决
本文链接: https://www.lsjlt.com/news/171410.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0