el select 滚动加载

Element UI库中的Select组件提供了滚动加载的功能，可以在选项较多时使用，提高用户体验和性能。

实现滚动加载的方法是通过监听Select组件的滚动事件，在滚动到底部时触发加载更多的数据。具体实现步骤如下：

1. 在Select组件中添加一个slot插槽，用于渲染下拉选项列表。

2. 监听Select组件的滚动事件，在滚动到底部时触发加载更多的数据。

3. 在加载数据时，将新数据添加到原有的选项列表中。

4. 当所有数据加载完毕后，将滚动事件取消，以避免不必要的性能消耗。

以下是一个简单的示例代码，实现了Select组件的滚动加载功能：

<template>
  <el-select v-model="value" @scroll="handleScroll">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    <el-option v-if="loading" label="加载中..." disabled></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [], // 存储所有选项的列表
      loading: false, // 是否正在加载数据
      page: 1, // 当前加载数据的页码
      pageSize: 10, // 每页显示的数据量
      total: 0, // 数据总数
    }
  },
  mounted() {
    this.loadOptions()
  },
  methods: {
    // 加载选项数据的方法
    async loadOptions() {
      try {
        this.loading = true
        const res = await fetch(`/api/options?page=${this.page}&pageSize=${this.pageSize}`)
        const { data, total } = await res.json()
        this.options = [...this.options, ...data]
        this.total = total
        this.loading = false
      } catch (error) {
        console.error(error)
        this.loading = false
      }
    },
    // 处理滚动事件的方法
    handleScroll(event) {
      const elem = event.target
      if (elem.clientHeight + elem.scrollTop >= elem.scrollHeight && !this.loading && this.options.length < this.total) {
        this.page++
        this.loadOptions()
      }
    },
  }
}
</script>

在上面的示例代码中，loadOptions方法用于加载选项数据，handleScroll方法用于处理滚动事件。在滚动到底部时，如果当前不在加载数据的状态，就会触发加载更多数据的操作。在加载数据时，通过计算当前数据总数和已加载数据的数量，判断是否需要继续加载数据。当所有数据加载完毕后，滚动事件就会被取消，避免不必要的性能消耗。