關(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: { ?// 生成的標(biāo)簽類型，默認使用 `div`標(biāo)簽包裹
? ? ? 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)文章
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue中使用screenfull?依賴,實現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴，實現(xiàn)全屏組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue使用路由的query配置項時清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項時如何清除地址欄的參數(shù)，本文通過案例給大家分享完美解決方案,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue使用gitshot生成gif問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
動態(tài)實現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動態(tài)實現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Element-UI中<el-cascader?/>回顯失敗問題的完美解決
我們在使用el-cascader控件往數(shù)據(jù)庫保存的都是最后一級的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時,直接給el-cascader傳入最后一級的數(shù)據(jù),它是不會自動勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下2023-01-01
vue.js 圖片上傳并預(yù)覽及圖片更換功能的實現(xiàn)代碼
這篇文章主要介紹了vue.js 圖片上傳并預(yù)覽及圖片更換功能，小編主要圍繞我們?nèi)粘Ｊ褂霉δ艿睦幼鲋v解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue代理和跨域問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07