vue3+el-select implements bottoming loading more functions (ts version)

import { Directive, DirectiveBinding } from 'vue'
const loadMore: Directive = {
  beforeMount(el: any, binding: DirectiveBinding) {
    (el)
    const selectDom = ((".more_select_dropdown") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
    (selectDom, 'selectDom++++++++++++++');
    function loadMores(this: any) {
      const isBase =  -  <= 
      if (isBase) {
         && ()
      }
    }
     = selectDom
     = loadMores
    nextTick(() => {
      selectDom?.addEventListener('scroll', loadMores)
    })
  },
  beforeUnmount(el: any) {
    if () {
      ('scroll', )
      delete 
      delete 
    }
  }
}
export default loadMore

import { createApp } from 'vue'
import App from './'
import router from '/@/router'
import loadMore from '@/utils/selectLoadMoreDirective'
const app = createApp(App)
(router)
('loadMore', loadMore)

<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="`${}${index}`" :label="" :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: 'Test 1'
  },
  {
    value: 2,
    label: 'Test 2'
  },
  {
    value: 3,
    label: 'Test 3'
  },
  {
    value: 4,
    label: 'Test 4'
  },
  {
    value: 5,
    label: 'Test 5'
  },
  {
    value: 6,
    label: 'Test 6'
  },
  {
    value: 7,
    label: 'Test 7'
  },
  {
    value: 8,
    label: 'Test 8'
  },
])
//Base functionconst loadMore = () => {
  ('Falling down');
  // Anti-shake treatment  setTimeout(() => {
    if () return //A value of true means there is no data     += 1
    //  = ()
    for (let i = 1; i <= 8; i++) {
      ({
        value: i,
        label: `test${i}`
      })
    }
  }, 500)
}
// Trigger when the selected value changesconst selectChange = () => {
  ('Selected xxxx')
}
</script>