内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

首页 > Vue >

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

发布:2021-09-18 浏览: 评论(

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

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


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