<template>
    <div>
        <el-select v-model="source_information" placeholder="请选择" filterable remote v-el-select-loadmore="loadmore"
            :remote-method="selectedRemoteMethod" :loading="selectedLoading" @change="selectedChange">
            <el-option v-for="item in options" :key="item.id"
                :label="item.fb_customer_name + ' ' + item.fb_customer_phone" :value="item">
            </el-option>
        </el-select>
    </div>
</template>

<script>
    export default {
      directives: {
        'el-select-loadmore': {
          bind(el, binding) {
            // 获取element-ui定义好的scroll盒子
            const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
            SELECTWRAP_DOM.addEventListener('scroll', function() {
            /**
            * scrollHeight 获取元素内容高度(只读)
            * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
            * clientHeight 读取元素的可见高度(只读)
            * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
            * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
            */
              const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
              if (condition) {
                binding.value()
              }
            })
          }
        }
      },
      methods: {
        // loadmore() {
    
        // }
      }
    }
</script>