数据太多处理，搜索，查询滚动

<template>
    <div>
        <a-select show-search allowClear v-model="form.School" placeholder="请选择院校" style="flex: 1;" option-filter-prop="children" :filter-option="filterOption" @focus="handleSchoolFocus" @blur="handleSchoolBlur" @change="handleSchoolChange" @popupScroll="handlePopupScroll" @search="handleSearch">
            <a-select-option v-for="(item,index) in SelectArr.frontDataZ" :key="item.id" :value="item.id">
                {{item.name}}
            </a-select-option>
        </a-select>
    </div>
</template>
<script>
    export default {
        name: "test",
        data() {
            return {
                SelectArr: {
                    dataZ: [], //总数据（不会改变）
                    frontDataZ: [], //存放前100的数据
                    sourceOwnerSystems: [],
                    valueData: '',
                    treePageSize: 100,
                    scrollPage: 1
                },
                form: {
                    School: undefined, //学校
                },
            }
        },
        mounted() {
            var that = this
            that.showTabelCiList()
        },
        methods: {
            ...mapActions({}),
            //接口数据
            showTabelCiList() {
                var that = this
                request.get(Server.action.SchoolList)
                    .then(res => {
                        if (res.data.code == '0') {
                            var schoolList = res.data.result
                            that.SelectArr.dataZ = res.data.result //保存全部数据
                            that.SelectArr.frontDataZ = res.data.result.slice(0, 100) //先显示前100条数据
                        } else {
                            showError(res.data.message);
                        }
                    });
            },
            //搜索的
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            handleSchoolFocus() {},
            handleSchoolBlur() {},
            handleSchoolChange(val) {
                var that = this
                if (!val) {
                    this.showTabelCiList()
                }
            },
            handleSearch(val) {
                var that = this
                that.valueData = val
                if (!val) {
                    that.showTabelCiList()
                } else {
                    that.SelectArr.frontDataZ = []
                    that.SelectArr.scrollPage = 1
                    that.SelectArr.dataZ.forEach(item => {
                        if (item.name.indexOf(val) >= 0) {
                            that.SelectArr.frontDataZ.push(item)
                        }
                    })
                    that.SelectArr.allDataZ = that.SelectArr.frontDataZ
                    that.SelectArr.frontDataZ = that.SelectArr.frontDataZ.slice(0, 100)
                }
            },
            handlePopupScroll(e) {
                var that = this
                const { target } = e
                const scrollHeight = target.scrollHeight - target.scrollTop
                const clientHeight = target.clientHeight
                // 下拉框不下拉的时候
                if (scrollHeight === 0 && clientHeight === 0) {
                    that.SelectArr.scrollPage = 1
                    console.log(that.SelectArr.scrollPage)
                } else {
                    // 当下拉框滚动条到达底部的时候
                    if (scrollHeight < clientHeight + 5) {
                        that.SelectArr.scrollPage = that.SelectArr.scrollPage + 1
                        const scrollPage = that.SelectArr.scrollPage // 获取当前页
                        const treePageSize = that.SelectArr.treePageSize * (scrollPage || 1) // 新增数据量
                        const newData = [] // 存储新增数据
                        let max = '' // max 为能展示的数据的最大条数
                        if (that.SelectArr.dataZ.length > treePageSize) {
                            // 如果总数据的条数大于需要展示的数据
                            max = treePageSize
                        } else {
                            // 否则
                            max = that.SelectArr.dataZ.length
                        }
                        // 判断是否有搜索
                        if (that.SelectArr.valueData) {
                            that.SelectArr.allDataZ.forEach((item, index) => {
                                if (index < max) { // 当data数组的下标小于max时
                                    newData.push(item)
                                }
                            })
                        } else {
                            that.SelectArr.dataZ.forEach((item, index) => {
                                if (index < max) { // 当data数组的下标小于max时
                                    newData.push(item)
                                }
                            })
                        }
                        that.SelectArr.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
                    }
                }
            },
        },
    }
</script>