關(guān)于el-scrollbar滾動條初始化不顯示的問題及解決
更新時間：2022年08月01日 16:04:46 作者：lovlin_l
這篇文章主要介紹了關(guān)于el-scrollbar滾動條初始化不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-scrollbar滾動條初始化不顯示
當(dāng)使用el-scrollbar的時候，比如你的數(shù)據(jù)列表是后端獲取的，這時候，初始化的時候，因為數(shù)據(jù)還沒有獲取到，導(dǎo)致里面的內(nèi)容沒有撐開，所以滾動條是不顯示的，但是可以正常滾動,見下圖
所以解決辦法是在獲取到列表的時候，調(diào)用一下update方法
查看源碼的時候，因為scrollBar有一個update方法，所以調(diào)用這個方法可以解決
<el-scrollBar ref="scrollDiv"></el-scrollBar>
...
// 異步獲取列表之后
this.nextTick(() => {
//解決滾動條初始化消失的問題
this.$refs.scrollDiv.update()
})
el-scrollbar:Element UI隱藏組件
滾動條初始化消失的問題
注意事項：
1.el-scrollbar的父層要有固定高度
2.el-scrollbar的高度要設(shè)成100%
3.如果出現(xiàn)橫滾動條，添加overflow-x:hidden;
問題分析
通過閱讀源碼，scrollbar組件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 這7個 props屬性
props: {
? ? native: Boolean, ?// 是否使用本地，設(shè)為true則不會啟用element-ui自定義的滾動條
? ? wrapStyle: {}, ?// 包裹層自定義樣式
? ? wrapClass: {}, ?// 包裹層自定義樣式類
? ? viewClass: {}, ?// 可滾動部分自定義樣式類
? ? viewStyle: {}, ?// 可滾動部分自定義樣式
? ? noresize: Boolean, // 如果 container 尺寸不會發(fā)生變化，最好設(shè)置它可以優(yōu)化性能
? ? 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)以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
通常在后臺管理系統(tǒng)中,需要根據(jù)每個用戶不同的權(quán)限來動態(tài)展示菜單,本文主要介紹了element多級菜單動態(tài)顯示的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
vue項目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項目為例給大家介紹了vue項目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
大家都經(jīng)常使用美團app買電影票，很多朋友不知道她的功能是怎么實現(xiàn)的，作為我程序員一枚對它的算法很好奇，今天小編就把基于Vue實現(xiàn)美團app的影院推薦選座功能分享到腳本之家平臺，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
在前端開發(fā)中,當(dāng)用戶頻繁連續(xù)點擊按鈕,可能會導(dǎo)致頻繁的請求或者觸發(fā)過多的操作,本文主要介紹了vue3按鈕點擊頻率控制的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了快速解決vue2+vue-cli3項目ie兼容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Editor.js是一個用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開源庫,它提供了一個簡潔、可擴展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡單方法,需要的朋友可以參考下2024-04-04
vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue-baidu-map 進入頁面自動定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進入頁面自動定位的解決方案,需要的朋友可以參考下2018-04-04
VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02