Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中，滑动加载更多数据效果

在Vue 3和Element UI中实现下拉框滑动加载更多数据的效果，可以通过组合API（Composition API）来实现。以下是一个简单的示例：

<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    :remote-method="loadOptions"
    :loading="loading"
    @scroll="handleScroll"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></el-option>
  </el-select>
</template>
 
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
 
interface Option {
  value: string;
  label: string;
}
 
const selectedValue = ref<string | number>('');
const options = ref<Option[]>([]);
const loading = ref<boolean>(false);
const page = ref<number>(1);
const pageSize = ref<number>(10);
 
// 模拟获取数据的API
const fetchData = async (page: number, pageSize: number): Promise<Option[]> => {
  // 这里应该是API请求获取数据
  // 模拟数据返回
  return new Promise((resolve) => {
    setTimeout(() => {
      const newOptions: Option[] = [];
      for (let i = 0; i < pageSize; i++) {
        newOptions.push({
          value: `value-${page * pageSize + i}`,
          label: `label-${page * pageSize + i}`,
        });
      }
      resolve(newOptions);
    }, 1000);
  });
};
 
// 加载选项
const loadOptions = async (query: string) => {
  if (loading.value) return;
  loading.value = true;
  const newOptions = await fetchData(page.value, pageSize.value);
  options.value = options.value.concat(newOptions);
  loading.value = false;
  page.value++;
};
 
// 组件加载时自动加载数据
onMounted(() => {
  loadOptions('');
});
 
// 监听滚动事件
const handleScroll = (event: Event) => {
  const target = event.target as HTMLDivElement;
  if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
    loadOptions('');
  }
};
</script>

在这个示例中，我们使用了Element UI的<el-select>和<el-option>组件。filterable和remote属性允许用户输入搜索条件，并且每次输入时都会调用loadOptions方法。loading属性用于显示加载状态，@scroll事件用于检测下拉框的滚动位置，当滚动到底部时触发加载更多数据的操作。fetchData方法模拟了一个API请求，应该替换为实际的数据获取逻辑。