在element-ui的select下拉框加上滾動加載
在項目中,我們需要運用到很多來自后端返回的數據。有時是上百條,有時甚至上千條。如果加上后端的多表查詢或者數據量過大,這就導致在前端的顯示就會及其慢,特別是在網絡不好的時候更是如此。
自然,后端就做了一項非?!捌痢钡慕换ンw驗數據——分頁
這不分頁還好,一分頁對超過10條數據之后的本來也不多,就20條,偏偏還得做個分頁器。(假設為10條)
此時,如果能夠像購物商城那樣拖拽到底部自動加載新數據就好了。
于是《在element-ui的select下拉框加上滾動加載》誕生了。
這里通過自定義封裝vue指令進行封裝。(什么是指令:官方指令叫v-on,v-model)
以下以element-ui中的select為例:
在main.js同級別文件中添加directives.js:
// directives.js import Vue from 'vue' Vue.directive('loadmore', { bind (el, binding) { // 獲取element-ui定義好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight if (CONDITION) { binding.value() } }) } })
- v-loadmore: 用于在element-ui的select下拉框加上滾動到底事件監(jiān)聽
- scrollHeight 獲取元素內容高度(只讀)
- scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
- clientHeight 讀取元素的可見高度(只讀)
如果元素滾動到底, 下面等式返回true, 沒有則返回false
scrollHeight - scrollTop === clientHeight
這里運用到了滾動偏移來做監(jiān)聽來處理,這與聊天對話框中默認下拉到底部的原理是大同小異的,后續(xù)我會有專門的文章進行講解。
// main.js // 注冊滾動條加載觸發(fā)事件v-loadmore綁定 import directives from './directives' Vue.use(directives)
然后在組件中使用
<!-- vue --> <el-select v-model="chatmode" placeholder="聊天模式" size="mini" v-loadmore="loadMore"> <el-option v-for="item in chatmodes" :key="item.value" :label="item.qa_name" :value="item.qa_code" :disabled="item.disabled"> </el-option> </el-select> <script> export default { methods: { loadMore () { // 這里寫入要觸發(fā)的方法 } } } </script>
總結
以上所述是小編給大家介紹的在element-ui的select下拉框加上滾動加載,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
- 如何解決element-ui中select下拉框popper超出彈框問題
- element-ui中select下拉框加載大數據渲染優(yōu)化方式
- 去除element-ui下拉框的下拉箭頭的實現
- 基于element-ui中el-select下拉框選項過多的優(yōu)化方案
- 關于element-ui?select?下拉框位置錯亂問題解決
- element-ui+vue-treeselect下拉框的校驗過程
- 解決element-ui的下拉框有值卻無法選中的情況
- Vue + Element-ui的下拉框el-select獲取額外參數詳解
- 使用Vant完成DatetimePicker 日期的選擇器操作
- 如何修改element-ui日期下拉框datetimePicker的背景色樣式
相關文章
基于JavaScript將表單序列化類型的數據轉化成對象的處理(允許對象中包含對象)
這篇文章主要介紹了基于JavaScript將表單序列化類型的數據轉化成對象的處理(允許對象中包含對象) 的相關資料,需要的朋友可以參考下2015-12-12