在element-ui的select下拉框加上滾動加載
在項目中,我們需要運用到很多來自后端返回的數(shù)據(jù)。有時是上百條,有時甚至上千條。如果加上后端的多表查詢或者數(shù)據(jù)量過大,這就導致在前端的顯示就會及其慢,特別是在網(wǎng)絡(luò)不好的時候更是如此。
自然,后端就做了一項非?!捌痢钡慕换ンw驗數(shù)據(jù)——分頁
這不分頁還好,一分頁對超過10條數(shù)據(jù)之后的本來也不多,就20條,偏偏還得做個分頁器。(假設(shè)為10條)
此時,如果能夠像購物商城那樣拖拽到底部自動加載新數(shù)據(jù)就好了。
于是《在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 獲取元素內(nèi)容高度(只讀)
- scrollTop 獲取或者設(shè)置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產(chǎn)生垂直方向的滾動條, 那它的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>
總結(jié)
以上所述是小編給大家介紹的在element-ui的select下拉框加上滾動加載,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 如何解決element-ui中select下拉框popper超出彈框問題
- element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式
- 去除element-ui下拉框的下拉箭頭的實現(xiàn)
- 基于element-ui中el-select下拉框選項過多的優(yōu)化方案
- 關(guān)于element-ui?select?下拉框位置錯亂問題解決
- element-ui+vue-treeselect下拉框的校驗過程
- 解決element-ui的下拉框有值卻無法選中的情況
- Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
- 使用Vant完成DatetimePicker 日期的選擇器操作
- 如何修改element-ui日期下拉框datetimePicker的背景色樣式
相關(guān)文章
JavaScript實現(xiàn)控制并發(fā)請求的方法詳解
這篇文章主要為大家詳細介紹了如果有100個請求,那么如何使用JavaScript實現(xiàn)控制并發(fā)請求,感興趣的小伙伴可以跟隨小編一起學習一2024-03-03ajaxfileupload.js實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了ajaxfileupload.js實現(xiàn)上傳文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04函數(shù)window.open實現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料,需要的朋友可以參考下。2015-08-08基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對象的處理(允許對象中包含對象)
這篇文章主要介紹了基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對象的處理(允許對象中包含對象) 的相關(guān)資料,需要的朋友可以參考下2015-12-12