Element组件 el-select设置滚动条+滚动加载(两种写法: 原生Js和自定义指令)

在Element UI的el-select组件中设置滚动条并实现滚动加载通常涉及到两个方面：

1. 设置滚动条：Element UI的el-select组件在下拉菜单超出视口高度时会自动显示滚动条，无需手动设置。
2. 滚动加载：这通常是自定义实现的，Element UI本身不提供滚动加载的功能。你可以通过监听滚动事件，并在用户滚动到列表底部时触发加载更多的操作。

以下是使用原生JavaScript和Vue自定义指令来实现滚动条设置和滚动加载的示例代码：

<template>
  <el-select v-scroll-load="loadMore" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [], // 初始选项列表
      page: 1, // 当前页数
      pageSize: 10, // 每页条数
    };
  },
  methods: {
    loadMore() {
      // 模拟异步加载更多数据
      setTimeout(() => {
        // 假设获取数据的API返回格式：{ data: [], total: 100 }
        const moreData = { /* 假设获取到的新数据 */ };
        if (this.options.length < moreData.total) {
          this.options = [...this.options, ...moreData.data]; // 更新选项列表
        }
      }, 1000);
    },
  },
  directives: {
    scrollLoad: {
      inserted(el, binding) {
        // 监听滚动事件
        el.addEventListener('scroll', () => {
          const { scrollHeight, scrollTop, clientHeight } = el;
          // 当滚动到底部时触发加载更多
          if (scrollHeight - (scrollTop + clientHeight) < 10) {
            binding.value(); // 调用loadMore方法
          }
        });
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个自定义指令v-scroll-load，它会在el-select的DOM元素上监听滚动事件。当滚动到底部10px以内时，会调用绑定在这个指令上的方法loadMore来加载更多数据。这里的loadMore方法应该发起异步请求来获取新的数据，并更新options数组，从而实现数据的滚动加载。

请注意，这个例子是一个简化的实现，实际应用中你可能需要根据自己的数据加载逻辑进行相应的调整。