ElementUI中scrollbar的使用解析
阿新 • • 發佈：2018-08-25
開發項目 tex apc red query 內容 `` pty 通用 ### 在用ElementUI開發項目的過程中，我們有時會需要滾動條，但是Element默認沒有Scroll-view這個組件，我們去elementui的github頁面上的issues中去搜索scrollbar，可以看到關於這個問題，還是有不少issue的。比如：
從中我們可以看出，內部是由elscrollbar這個組件的，但是因為並不通用，所以沒有寫相關文檔。另外當resize事件時，也有一些bug。不過像頁面上小範圍內的滾動，還是可以用的，很簡單，只需給想實現滾動的元素內容包裹在<el-scrollbar></el-scrollbar>中就行了，記得給wrapClass設置max-height屬性，這樣才能出現滾動條，就像elselct裏邊一樣。
```js
<el-select-menu
ref="popper"
:append-to-body="popperAppendToBody"
v-show="visible && emptyText !== false">
<el-scrollbar
tag="ul"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
ref="scrollbar"
:class="{ ‘is-empty‘: !allowCreate && query && filteredOptionsCount === 0 }"
v-show="options.length > 0 && !loading">
<el-option
:value="query"
created
v-if="showNewOption">
</el-option>
<slot></slot>
</el-scrollbar>
<p
class="el-select-dropdown__empty"
v-if="emptyText &&
(!allowCreate || loading || (allowCreate && options.length === 0 ))">
{{ emptyText }}
</p>
</el-select-menu>
```
從中我們可以看出，內部是由elscrollbar這個組件的，但是因為並不通用，所以沒有寫相關文檔。另外當resize事件時，也有一些bug。不過像頁面上小範圍內的滾動，還是可以用的，很簡單，只需給想實現滾動的元素內容包裹在<el-scrollbar></el-scrollbar>中就行了，記得給wrapClass設置max-height屬性，這樣才能出現滾動條，就像elselct裏邊一樣。
```js
<el-select-menu
ref="popper"
:append-to-body="popperAppendToBody"
v-show="visible && emptyText !== false">
<el-scrollbar
tag="ul"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
ref="scrollbar"
:class="{ ‘is-empty‘: !allowCreate && query && filteredOptionsCount === 0 }"
v-show="options.length > 0 && !loading">
<el-option
:value="query"
created
v-if="showNewOption">
</el-option>
<slot></slot>
</el-scrollbar>
<p
class="el-select-dropdown__empty"
v-if="emptyText &&
(!allowCreate || loading || (allowCreate && options.length === 0 ))">
{{ emptyText }}
</p>
</el-select-menu>
```
ElementUI中scrollbar的使用解析