關(guān)于element-ui的隱藏組件el-scrollbar的使用
更新時(shí)間：2019年05月29日 11:06:33 作者：gorkys
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
雖然在官方文檔中沒有給出這個(gè)組件，但是在源碼中是有的。所以我們可以直接使用：
<el-scrollbar></el-scrollbar>
但是我們需要微調(diào)一下樣式，兩種情況的演示代碼如下：
已知內(nèi)容高度
<div style='height:800px'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
<style>
.page-component__scroll{
height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
overflow-x: auto;
}
<style>
高度由內(nèi)容撐開
<html>
<body>
<div style='height:100%'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
</body>
</html>
<style>
html,body{
height:100%
overflow:hidden; /*有效防止在頁面進(jìn)行手動(dòng)刷新時(shí)顯示內(nèi)置滾動(dòng)條*/
}
.page-component__scroll{
height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
overflow-x: auto;
}
<style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了jenkins自動(dòng)化部署vue，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家通過示例解析Ant?Design?Vue組件slots作用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和?node.js，是一個(gè)第三方插件，第三方異步請求工具庫，這篇文章主要介紹了Axios在vue項(xiàng)目中的封裝方法,需要的朋友可以參考下2022-10-10
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作
這篇文章主要介紹了echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue遞歸生成樹狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
el-form的model、prop屬性和表單校驗(yàn)等使用
本文主要介紹了el-form的model、prop屬性和表單校驗(yàn)等使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08