vue3 elementUI select 下拉加载更多

• directive.ts

import { Directive, DirectiveBinding } from 'vue'

const loadMore: Directive = {
    beforeMount(el: any, binding: DirectiveBinding) {
        console.log(el)
        const selectDom = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap')

        function loadMores(this: any) {
            const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (isBase) {
                binding.value && binding.value()
            }
        }
        el.selectDomInfo = selectDom
        el.userLoadMore = loadMores

        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 './directive'

const app = createApp(App)
app.use(router).directive('loadMore', loadMore)

• scrollSelect.vue

<template>
    <el-select
        v-model="selectedValue"
        v-loadMore="loadMore"
        remote
        filterable
        class="more-select"
        :popper-class="`more-select-dropdown ${loading && 'loading'}`"
        @change="selectChange"
    >
        <!-- 只有isShow定义了false，才进行隐藏，否则正常显示 -->
        <el-option
            v-for="(item, index) in list"
            v-show="item.isShow === false ? false : true"
            :key="item.value + `'${index}'`"
            :label="item.label"
            :value="item.value"
        />
    </el-select>
</template>

<script setup lang="ts">
interface UploadProps {
    dataList: any
    files: any
    width: number
    height: number
    disabled: boolean
    auto?: boolean
    bucket: string //上传到哪个Bucket
}
const props = withDefaults(defineProps<UploadProps>(), {
    dataList: [],
    files: '',
    width: 100,
    height: 100,
    disabled: false,
    auto: true,
    bucket: ''
})
const selectedValue = ref([])
const selectData = reactive({
    pageIndex: 1,
    pageSize: 5,
    finished: false
})

const loadMore = () => {
    // 防抖处理
    setTimeout(() => {
        if (selectData.finished) return
        selectData.pageIndex += 1
        list.value = list.value.concat(list.value)
    }, 500)
}

const loading = ref(false)
const list = ref([
    {
        isShow: true,
        value: 1,
        label: '测试1'
    },
    {
        isShow: true,
        value: 2,
        label: '测试2'
    },
    {
        isShow: true,
        value: 3,
        label: '测试3'
    },
    {
        isShow: true,
        value: 4,
        label: '测试4'
    },
    {
        isShow: true,
        value: 5,
        label: '测试5'
    },
    {
        isShow: true,
        value: 6,
        label: '测试6'
    },
    {
        isShow: true,
        value: 7,
        label: '测试7'
    },
    {
        isShow: true,
        value: 8,
        label: '测试8'
    },
    {
        isShow: true,
        value: 9,
        label: '测试9'
    },
    {
        isShow: true,
        value: 10,
        label: '测试10'
    }
])

const selectChange = () => {
    console.log(2)
}
</script>