Vue+ElementUI实现Select下拉框滚动请求接口分页（自定义指令）

前言：昨天后端跟我说，给我一个带分页的接口，请求数据展示到select下拉框内，要求用户在滚动数据到下拉框底部时，请求接口，把数据新增到下拉框里展示，并且要求带远程搜索功能。于是我写了一个vue自定义指令，下面来分析介绍一下方法如何实现。

<template>
    <div>
        <el-form :model="form">
            <el-form-item label="下拉框">
                <el-select v-model="form.select" filterable remote remote-method="handleRemota"
                    v-lazy-load-dropdown="handleScrollDropdown">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
// 举例子 引用接口
import { getDemoList } from '@/api'
export default {
    data() {
        return {
            options: [],
            query: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            form: {
                select: ''
            }
        }
    },
    directives: {
        'lazy-load-dropdown': {
            bind(el, binding) {
                const SELECT_DOM = el.quertSelector('.el-select-dropdown .el-scrollbar__wrap')
                // SELECT_DOM 获取到的dmo节点 下面需要用到dmo节点的clientHeight
                SELECT_DOM.addEventListener('scroll', () => {
                    if (SELECT_DOM.scrollTop + SELECT_DOM.clientHeight >= SELECT_DOM.scrollHeight) {
                        binding.value()
                    }
                })
            }
        }
    },
    methods: {
        // 获取list数据
        getData() {
            getDemoList().then(res => {
                if (res.data.code === 200) {
                    // 这一步是需要把请求接口后的数据拼到数组里面
                    this.options = this.options.concat(res.data.data)
                    this.query.total = res.data.total
                }
            })
        },
        // 给自定义指令用的方法
        handleScrollDropdown() {
            this.query.pageNum++
            // 这一步是做了一个容错判断 在pageNum>total 时 return出去
            if (this.query.pageNum > this.query.total) return
            // 获取列表接口
            this.getData()
        },
        // 远程搜索
        handleRemota(val) {
            if (val !== '') {
                this.query.keyWords = val
                this.getData()
            }
        }
    }

}
</script>

在代码中，我们不难发现主要是需要获取到下拉框的高度，然后通过计算，得到底部的时候触发方法去请求接口。 大家可以提出其他建议和方法。