首页 > Vue >

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

时间: 作者:admin 浏览:

有时候因为数据量巨大的原因,需要支持输入框远程搜索功能,但是搜索框也不能一下子返回所有的搜素结果,否则也会因为数据量大导致接口压力与卡顿,所以想做成搜索结果只返回前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也是一样的做法,赶紧去试试吧

微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4