目录
- 思路
- main.ts
- home.vue
思路
使用全局指令来实现触底加载功能
通过el-select中的popper-class给下拉框加入一个类名
在src下的utils文件夹中创建selectLoadMoreDirective.ts文件
import { Directive, DirectiveBinding } from \’vue\’
const loadMore: Directive = {
beforeMount(el: any, binding: DirectiveBinding) {
console.log(el)
const selectDom = (document.querySelector(\”.more_select_dropdown\”) as any).querySelector(\”.el-select-dropdown .el-select-dropdown__wrap\”);
console.log(selectDom, \’selectDom++++++++++++++\’);
function loadMores(this: any) {
const isBase = this.scrollHeight – this.scrollTop <= this.clientHeight
if (isBase) {
binding.value && binding.value()
}
}
el.selectDomInfo = selectDom
el.userLoadMore = loadMores
nextTick(() => {
selectDom?.addEventListener(\’scroll\’, loadMores)
})
},
beforeUnmount(el: any) {
if (el.userLoadMore) {
el.selectDomInfo.removeEventListener(\’scroll\’, el.userLoadMore)
delete el.selectDomInfo
delete el.userLoadMore
}
}
}
export default loadMore
main.ts
import { createApp } from \’vue\’
import App from \’./App.vue\’
import router from \’/@/router\’
import loadMore from \’@/utils/selectLoadMoreDirective\’
const app = createApp(App)
app.use(router)
app.directive(\’loadMore\’, loadMore)
home.vue
<template>
<div class=\”p-2\”>
<el-select v-model=\”selectedValue\” v-loadMore=\”loadMore\” class=\”more-select\” popper-class=\”more_select_dropdown\”
@change=\”selectChange\”>
<el-option v-for=\”(item, index) in list\” :key=\”`${item.value}${index}`\” :label=\”item.label\” :value=\”item.value\” />
</el-select>
</div>
</template>
<script setup name=\”Home\” lang=\”ts\”>
import { ComponentInternalInstance, computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from \’vue\’;
const selectedValue = ref([])
const selectData = reactive({
pageIndex: 1,
pageSize: 5,
finished: false
})
const list = ref([
{
value: 1,
label: \’测试1\’
},
{
value: 2,
label: \’测试2\’
},
{
value: 3,
label: \’测试3\’
},
{
value: 4,
label: \’测试4\’
},
{
value: 5,
label: \’测试5\’
},
{
value: 6,
label: \’测试6\’
},
{
value: 7,
label: \’测试7\’
},
{
value: 8,
label: \’测试8\’
},
])
//触底函数
const loadMore = () => {
console.log(\’ 触底了\’);
// 防抖处理
setTimeout(() => {
if (selectData.finished) return //值为true,则代表没有数据了
selectData.pageIndex += 1
// list.value = list.value.concat(list2.value)
for (let i = 1; i <= 8; i++) {
list.value.push({
value: i,
label: `测试${i}`
})
}
}, 500)
}
//选中值发生变化时触发
const selectChange = () => {
console.log(\’选中的xxxx\’)
}
</script>
到此这篇关于vue3+el-select实现触底加载更多功能的文章就介绍到这了,更多相关vue3+el-select 加载更多功能内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!
您可能感兴趣的文章:
- vue element el-select下拉滚动加载的方法
- vue如何实现el-select下拉选项的懒加载
- el-select数据过多懒加载的解决(loadmore)
- vue使用el-select下拉框匹配不到值的问题及解决
- ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式
- element-ui中el-form-item内的el-select该如何自适应宽度
- el-select如何获取下拉框选中label和value的值