當(dāng)下拉框數(shù)據(jù)過(guò)多時(shí),加載會(huì)非常慢,所以使用分頁(yè)去顯示,通過(guò)監(jiān)聽(tīng)滾動(dòng)事件來(lái)達(dá)到分頁(yè)效果。
我是使用Vue自定義指令來(lái)做的。
一、首先在src下創(chuàng)建一個(gè)js文件，完成自定義指令的編寫
import Vue from 'vue'
export default () => {
Vue.directive('selectScroll', {
bind (el, binding) {
// 如上圖，我通過(guò)v-if來(lái)控制了兩個(gè)select框，當(dāng)沒(méi)有binding.arg這個(gè)參數(shù)時(shí)，我只能監(jiān)聽(tīng)到企業(yè)類型下的select框，所以，我通過(guò)傳參控制了監(jiān)聽(tīng)的哪個(gè)select框
var className='.'+binding.arg
el.className=binding.arg
// 獲取滾動(dòng)頁(yè)面DOM
const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
? ? ? // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
SCROLL_DOM.addEventListener('scroll', function () {
// 當(dāng)前的滾動(dòng)位置 減去 上一次的滾動(dòng)位置
// 如果為true則代表向上滾動(dòng)，false代表向下滾動(dòng)
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
// 如果已達(dá)到指定位置則觸發(fā)
if (CONDITION) {
// 將滾動(dòng)行為告訴組件
binding.value()
}
})
}
})
}有沒(méi)有大神告訴我，自定義指令為啥在同一個(gè)頁(yè)面不能使用多次？
二、在main.js中引入進(jìn)來(lái)
import Directives from './utils/select-scroll'
Vue.use(Directives)三、使用
<el-select
v-model="Id"
v-selectScroll:selectName="handleScroll" //這行最重要(傳參)
? // v-selectScroll="handleScroll" //這行最重要(不傳參)
filterable
clearable
placeholder="請(qǐng)選擇"
>
<el-option
v-for="(item,index) in options"
:key='index'
:label="item.name"
:value="item.id"
></el-option>
</el-select>因?yàn)槲疫€加了搜索功能,問(wèn)題還算挺多的
參考官方文檔:文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602918.html
自定義指令 | Vue.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-602918.html
到了這里，關(guān)于element-ui select下拉框滾動(dòng)加載更多的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
