el-autocomplete实现滚动分页加载的方法

有时候因为数据量巨大的原因，需要支持输入框远程搜索功能，但是搜索框也不能一下子返回所有的搜素结果，否则也会因为数据量大导致接口压力与卡顿，所以想做成搜索结果只返回前20条，剩下的可以滚动加载的形式，数据量大很适合做分页，el-autocomplete在vue的代码如下：

template部分

<el-autocomplete
    v-scrollLoad="load"
    v-model="keywords"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
></el-autocomplete>

javascript部分

export default {
    data(){
        return {
            keywords:""//输入关键词的值
            loading:false
        }
    },
    methods:{
        querySearch(queryString, cb){
            //搜索请求数据返回结果的代码，具体请参考elementUI官网用法
        },
        load(){
            //滚动加载的代码
        }，
        handleSelect(item){
            //下拉选中的值
        }
    },
    directives:{
        scrollLoad：{
            bind(el, binding, vnode){
                let wrapDom = el.querySelector(".el-autocomplete-suggestion__wrap")
                let listDom = el.querySelector(".el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list")
                wrapDom.addEventListener("scroll",(e)=>{
                    let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 20 - listDom.offsetHeight
                    if(condition > 0 && !vnode.context.loading){
                        //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
                        binding.value()
                    }
                },false)
            }
        }
    }
}

以上即为下拉滚动加载的自定义绑定方法，除了可以在el-autocomplete标签这样做，类似方法在el-select也是一样的做法，赶紧去试试吧