实际需求：在项目中一个下拉框中需要展示10000条数据，这10000条数据去后端查询虽然比较快，但是将查询结果返回给前端需要进行渲染，前端就会造成卡顿的现象，这时候就可以使用滑动加载只渲染总数据前100条数据以保证不卡顿。

        然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后通过select下拉框popupScroll事件，下拉列表滚动时的回调，每次回调时都添加一部分数据来解决下拉框的卡顿问题。

        虽然解决了卡顿问题，但是非常的不方便查询数据，这时候就需要对下拉框实现一个模糊查询的功能，从而解决了滑动加载所带来的不便，满足需求。
 

代码实现：

<a-select
                            v-decorator="['xzq_xian_id']"
                            style="width: 100%"
                            :options="frontDataZSupplier"
                            @popupScroll="handlePopupScroll"
                        >
                        </a-select>

supList: [], //从后端查询的所有数据（不会改变）
frontDataZSupplier:[], //  100条数据的集合
sourceOwnerSystems: [], // 名称的集合（过滤）
treePageSize: 100,
scrollPage: 1,

//下拉框下滑事件
        handlePopupScroll (e) {
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop
            const clientHeight = target.clientHeight
            // 下拉框不下拉的时候
            if (scrollHeight === 0 && clientHeight === 0) {
                this.scrollPage = 1
                console.log(this.scrollPage)
            } else {
                // 当下拉框滚动条到达底部的时候
                if (scrollHeight < clientHeight + 5) {
                this.scrollPage = this.scrollPage + 1
                const scrollPage = this.scrollPage// 获取当前页
                const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量
                console.log(scrollPage);
                const newData = [] // 存储新增数据
                let max = '' // max 为能展示的数据的最大条数
                if (this.supList.length > treePageSize) {
                    // 如果总数据的条数大于需要展示的数据
                    max = treePageSize
                } else {
                    // 否则
                    max = this.supList.length
                }
                // 判断是否有搜索
                if (this.valueData) {
                    this.allDataZ.forEach((item, index) => {
                    if (index < max) { // 当data数组的下标小于max时
                        newData.push(item)
                    }
                    })
                } else {
                    this.supList.forEach((item, index) => {
                    if (index < max) { // 当data数组的下标小于max时
                        newData.push(item)
                    }
                    })
                }
            
                this.frontDataZSupplier= newData // 将新增的数据赋值到要显示的数组中
                }
            }
        }