el-autocomplet添加搜索滚动加载功能

最新推荐文章于 2024-03-20 19:58:59 发布

前端程序猿之路

最新推荐文章于 2024-03-20 19:58:59 发布

阅读量1k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/wuww18stu/article/details/123133606

版权

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载 ^[1]

el-autocomplet添加搜索滚动加载功能

代码如下：

1.使用el-autocomplete组件

 1<el-autocomplete
 2                    v-model="name"
 3                    :fetch-suggestions="querySearch"
 4                    placeholder="请输入用户姓名"
 5                    :trigger-on-focus="false"
 6                    @select="handleSelect"
 7                    v-scrollLoad="load"
 8                >
 9                    <template slot-scope="{ item }">
10                        <div>
11                            <span v-if="item.name">{{ item.name}}</span>
12                        </div>
13                    </template>
14                </el-autocomplete>

2.定义data

1data() {
2    name:'',
3    callback:'',
4
5}

3.自定义scrollLoad指令

 1directives:{
 2        // 指令名称
 3        scrollLoad:{
 4            // 绑定事件  将指令绑定给DOM元素时执行一次，只执行一次
 5            bind(el, binding, vnode){
 6                let wrapDom = el.querySelector(".el-autocomplete-suggestion__wrap")
 7                let listDom = el.querySelector(".el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list")
 8                wrapDom.addEventListener("scroll",(e)=>{
 9                    let condition = wrapDom.clientHeight + wrapDom.scrollTop - wrapDom.scrollHeight
10                    if(condition >= 0 && !vnode.context.loading){
11                        //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
12                        binding.value()
13                    }
14                },false)
15            }，
16            // 虚拟DOM重新渲染时执行
17            update(el,bindings,vnode){
18
19            }
20        }
21    },

4.定义相关方法

 1    methods: {
 2        querySearch(queryString, cb) {
 3            if (cb) {
 4                this.callback = cb
 5            }
 6            let params = {
 7                pageIndex: this.pageIndex,
 8                pageSize: this.pageSize,
 9                trueName: this.name
10            }
11            //  请求接口
12            ......
13        },
14        handleSelect(data) {
15            ......
16        },
17        //滚动加载的代码
18        load(){
19            this.pageIndex = this.pageIndex + 1
20            this.querySearch()
21        }
22}