Vue下实现element的select选择器下拉加载更多

select选择器实现下拉加载更多

可以将此细分为，1.下拉到底部； 2.触发请求； 3.加载，难点便只是在下拉到底部。

我们要想知道是否已经触底，首先找到拥有滚动条的元素
在select 添加 ref

<template>
	<el-select v-model="value" ref="select" placeholder="请选择" :loading="loading">
		<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
		</el-option>
	</el-select>
</template>
<script>
  export default {
   
    name: "selectPage",
	data(){
   
      return{
   }
	},
	mounted(){
   
      console.log(this.$refs.select)
    },
  }
</script>

我们可以找到滚动条在此元素，接下来便好办了，监听滚动条滑动并添加事件

mounted(){
   
  console.log(this.$refs.select