- select下拉加載更多組件 select-scroll.vue
<el-select v-model="selected" filterable multiple :filter-method="search" @visible-change="searchPositionScroll" popper-class="select-scroll">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"/>
</el-select>
</template>
<script>
// 使用列子 <select-scroll v-model="params.positonName" :options="posList" @search="searchPosition" @scrollSearch="searchPositionScroll" multiple/>
// // 獲取posList列表
// getPositionList(e, append = false) {
// if (!this.params.authDeptPath) {
// this.posList = []
// this.params.positonName = []
// return
// }
// this.positionParams.positionName = e
// clearTimeout(this.timer)
// this.timer = setTimeout(() => {
// if (append) {
// this.positionParams.currentPage++
// }
// positionInfoList(this.positionParams).then(res => {
// this.posList = this.posList.concat(res.data.records.map(v => {
// v.id = v.positionId
// v.label = v.positionName
// v.value = v.positionName
// return v
// }))
// })
// }, 500)
// },
// // select搜索查詢
// searchPosition(e) {
// this.posList = []
// this.positionParams.currentPage = 1
// this.getPositionList(e)
// },
// // select滾動到底加載
// searchPositionScroll(e) {
// this.getPositionList(e, true)
// },
import loadingGif from '@/assets/images/loading.gif'
export default {
name: 'select-scroll',
props: {
value: { type: Array, require: true },
options: { type: Array, require: true }
},
data() {
return {
selected: [],
query: ''
}
},
watch: {
value: {
immediate: true,
handler(newV) {
this.value = newV
}
},
selected(newV) {
this.$emit('input', newV)
},
options() {
const loadingGif = document.querySelector('.select-scroll .loadingGif')
if (loadingGif) {
loadingGif.parentElement.removeChild(loadingGif)
}
}
},
methods: {
search(e) {
this.query = e
this.$emit('search', e)
},
// 滾動到底加載
searchPositionScroll(e) {
if (e) {
const select_dom = document.querySelector('.select-scroll.el-select-dropdown .el-select-dropdown__wrap')
select_dom.addEventListener('scroll', (event) => {
const dom = event.target
if (dom.scrollHeight == dom.scrollTop + dom.clientHeight) {
console.log(dom.scrollHeight, dom.scrollTop, dom.clientHeight, '滾動到底了')
// 加個loading轉圈圈
if (!dom.querySelector('.loadingGif')) {
const img = new Image()
img.src = loadingGif
const div = document.createElement('div')
div.style = 'text-align:center'
div.className = 'loadingGif'
div.appendChild(img)
dom.querySelector('.el-select-dropdown__list').appendChild(div)
}
this.$emit('scrollSearch', this.query)
}
})
}
}
}
}
</script>
<style>
</style>```