element-ui select 滚动翻页（远程）

此方法中，后端返回的数据是做了分页的，只需要在展示的时候做数据整合。

关于滚动条翻页，可以写一个公用方法

1 、新增一个js文件：directive.js

import Vue from 'vue'
export default () => {
  Vue.directive('scroll', {
    bind(el, binding) {
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      let scrollPosition = 0
      SCROLL_DOM.addEventListener('scroll', function() {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const flagToDirection = this.scrollTop - scrollPosition > 0
        // 记录当前的滚动位置
        scrollPosition = this.scrollTop
        const LIMIT_BOTTOM = 0
        // 记录滚动位置距离底部的位置
        const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) <= LIMIT_BOTTOM
        // 如果已达到指定位置则触发
        if (scrollBottom) {
          // 将滚动行为告诉组件
          binding.value(flagToDirection)
        }
      })
    }
  })
}

2 、在 main.js 全局引用

import Directives from './directives' （具体看新建文件位置）

Vue.use(Directives)

3、在页面使用方法

<el-select
    filterable
    remote
    v-scoll="val=> handleScoll(val, 'cItem')"
    :remote-method="remoteChang"
    @focus="changeFocus"
>
    <el-opetion
        v-for="item in List"
        key="item.id"
        :label="item.name"
        :value='item.id'
    ></el-opetion>
</el-select>

<script>
    export default {
        data() {
            return {
                pageNum : 1,

            }    
        },
        methods: {
            // 远程搜索关键字
            remoteChange (query = '') {
                // 重新赋值
                this.query = query
                // 关键字为空
                 if (query) {
                        this.list = []
                        this.pageNum = 1
                   }
                // 调用接口
                    this.xxx(query)
                },
            // 接口方法
             xxx(query) {
                let obj = {pageNum: this.pageNum}
                // 接口
                jiekou(obj).then(res=>{
                    //成功
                    ...
                    ...
                    ...
                    // 整合数组
                    this.List = this.pageNum === 1 ? data.list : this.List.concat(data.list)
                    // 获取总页数
                    this.totlePages = data.pages
                 }).catch(error=>{
                    this.$message.error(error.message)
                 })
                },
            // 滚动条滚动
            handleScroll (val) {
                if (val) {
                    if (this.totlePages > this.pageNum) {
                        // 总页码大于 当前页码，滚动页码加1
                        this.pageNum += 1
                        // 滚动调用接口
                        this.xxx(this.query)
                    }
                }
            },
            // 聚焦是获取数据，需把关键字置空
            changeFocus() {
                this.pageNum = 1
                this.query = null
                // 掉接口
                this.xxx()
            },
        }
     }    


</script>