vue3 element plus el-select下拉触底事件

在Vue 3和Element Plus中，你可以使用`@scroll.native`事件来监听下拉框的滚动事件，从而实现下拉触底的操作。下面是一个示例：

<template>
  <el-select
    v-model="selectedValue"
    :ref="selectRef"
    @scroll.native="handleScroll"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      selectedValue: '',
      options: [
        // 下拉框选项数据
      ],
    };
  },
  setup() {
    const selectRef = ref(null);

    const handleScroll = () => {
      const selectEl = selectRef.value.$refs.input.$refs.popper.$refs.popper;
      const scrollTop = selectEl.scrollTop;
      const scrollHeight = selectEl.scrollHeight;
      const clientHeight = selectEl.clientHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        // 触底逻辑
        console.log('触底了');
      }
    };

    return {
      selectRef,
      handleScroll,
    };
  },
};
</script>

在上面的示例中，我们使用了`@scroll.native`事件来监听下拉框的滚动事件。然后，在`handleScroll`方法中，我们获取了下拉框的滚动条位置和高度信息，并通过判断滚动条位置是否触底来执行相应的逻辑。

注意：这里使用了`ref`和`setup`函数来定义组件的数据和方法，这是Vue 3中的新特性。同时，我们还使用了Element Plus组件库中的`el-select`和`el-option`组件来实现下拉框功能。