关于el-scrollbar滚动条初始化不显示的问题及解决
更新时间：2022年08月01日 16:04:46 作者：lovlin_l
这篇文章主要介绍了关于el-scrollbar滚动条初始化不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-scrollbar滚动条初始化不显示
当使用el-scrollbar的时候，比如你的数据列表是后端获取的，这时候，初始化的时候，因为数据还没有获取到，导致里面的内容没有撑开，所以滚动条是不显示的，但是可以正常滚动,见下图
所以解决办法是在获取到列表的时候，调用一下update方法
查看源码的时候，因为scrollBar有一个update方法，所以调用这个方法可以解决
<el-scrollBar ref="scrollDiv"></el-scrollBar>
...
// 异步获取列表之后
this.nextTick(() => {
//解决滚动条初始化消失的问题
this.$refs.scrollDiv.update()
})
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'
}
}代码示例
<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)以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
通常在后台管理系统中,需要根据每个用户不同的权限来动态展示菜单,本文主要介绍了element多级菜单动态显示的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2018-04-04
大家都经常使用美团app买电影票，很多朋友不知道她的功能是怎么实现的，作为我程序员一枚对它的算法很好奇，今天小编就把基于Vue实现美团app的影院推荐选座功能分享到脚本之家平台，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了Vue.js 中制作自定义选择组件的代码附演示demo,通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
在前端开发中,当用户频繁连续点击按钮,可能会导致频繁的请求或者触发过多的操作,本文主要介绍了vue3按钮点击频率控制的实现示例,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了快速解决vue2+vue-cli3项目ie兼容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Editor.js是一个用于构建具有完全可定制化块结构的现代编辑器的开源库,它提供了一个简洁、可扩展和易于使用的接口,使开发人员能够创建拥有丰富内容和互动性的编辑器,这篇文章主要给大家介绍了关于vue3使用富文本编辑器Editor.js的简单方法,需要的朋友可以参考下2024-04-04
下面小编就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue-baidu-map 进入页面自动定位的解决方案(推荐)
这篇文章主要介绍了vue-baidu-map 进入页面自动定位的解决方案,需要的朋友可以参考下2018-04-04
VUE使用ElementUI下拉框 @change事件数据不回显问题
这篇文章主要介绍了VUE使用ElementUI下拉框 @change事件数据不回显问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论