element select 下拉框下拉加载更多，使用IntersectionObserver-交叉观察者

因为element 复选框没法进行分页，但是接口数据量较大只能进行分页。
通过交叉观察者监听是否可见select 底部最后一个元素，如果可见叫触发交叉观察者方法返回一次响应然后进行分页++的操作

<template>
  <el-select v-bind="$attrs" v-on="$listeners" ref="select">
    <slot></slot>
    <div ref="touchBottom"></div>
    <el-option value="" v-if="loading" v-loading="loading" />
  </el-select>
</template>

<script>
  /**
   * 接收 loading 进行下拉触底加载中状态
   * 返回 touchBottom 方法
   * */
  export default{
    data(){
      return{
        io:null
      }
    },
    props:{
      loading:{
        type:Boolean,
        default:false
      }
    },
    mounted(){
     // 初始化观察对象
     this.io = new IntersectionObserver(this.handleScroll,{
       root:this.$refs.select.$refs.popper.$el
     });
     // 获取被监听元素
     let viewList = this.$refs.touchBottom;
     // 绑定
     this.io.observe(viewList);
    },
    methods:{
       handleScroll(status) {
         if(status[0].isIntersecting){
           this.$emit('touchBottom');
         }
      },
    },
    destroyed() {
        // 关闭观察器
        this.io.disconnect();
    },
  }
</script>

进行使用

<template>
  <wk-select @touchBottom="touchBottom" :loading="loading">
     <el-option
        v-for="(item) in arr"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
  </wk-select>
</template>
<script>
import wkSelect from "@/components/wkSelect/index";
export default {
	components: { wkSelect },
}
</script>