vue select 分页加载数据（懒加载）_v-el-select-loadmore

有时候下拉数据量过大，会出现卡住的现象。本文就是解决这个问题，实现下拉框分页加载。

在 el-selec 上 加 v-el-select-loadmore 指令（在下面定义）

<template>
    <el-form :inline="true" size="small">
        <el-form-item label="小区">
            <el-select v-model="reqParams.communityId" v-el-select-loadmore="loadmore" clearable>
                <el-option value="" label="全部" />
                <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
    </el-form>
</template>

1
2
3
4
5
6
7
8
9
10
11

Vue.directive： 注册或获取全局指令。

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

具体可以看官方文档，在此就不在赘述了。

// 自定义指令
directives: {
    "el-select-loadmore": {
        bind(el, binding) {
            // 获取element-ui定义好的scroll盒子
            const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap")
            SELECTWRAP_DOM.addEventListener("scroll", function () {
                /*   scrollHeight 获取元素内容高度(只读)
                     scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    clientHeight 读取元素的可见高度(只读)
                      */
                const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
                // 判断滚动到底部  (condition:如果元素滚动到底, 下面等式返回true, 没有则返回false)
                if (condition) {
                    // binding.value 为自定义指令绑定的值，因为绑定的是个方法，所以这里是方法调用，触发指令后执行加载数据
                    binding.value()
                }
            })
        }
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

定义一个方法，分页获取数据，具体请看代码：

methods: {
    //获取小区
    async loadmore() {
        try {
            if (this.communityParams.pageNo == 1 || this.communityParams.pageNo <= this.totalPage) {
                let params = Object.assign({}, this.communityParams)
                const { data } = await this.$axios.get(API_DEVICE_COMMON_COMMUNITY, { params: params })
                this.totalPage = data.totalPage
                this.communityList =
                    this.communityParams.pageNo == 1 ? data.list : [...this.communityList, ...data.list]
            }
            this.communityParams.pageNo++
        } catch (e) {
            this.$log.error(e)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

直接上图~~~

---

之前用这种方法解决了 vue select 下拉 加载 请求接口的问题。
但是最近发现不知道为什么原来好好的，下来没有效果了。打印之后发现：
滚动到底部，condition 计算出现了错误 导致滚动 之后不调用方法。
于是在这里插入代码片 const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 1
默默+1 ，效果倒是出现了，不知道会不会有其他影响，也不是很清楚为什么会导致 计算错误。
如果有人知道，请指出来哦~ thankyou~~~