数据过多select懒加载

el-select数据过多页面卡顿—懒加载（下拉框可搜索）

<template>
    <div class="modal">
        <div class="form-item">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="角色：" prop="roleName">
                    <el-select
                        style="width: 100%"
                        v-model="form.roleName"
                        placeholder="请选择"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户：" prop="users">
                    <el-select style="width: 100%"
                               v-model="form.users" placeholder="请选择"
                               multiple
                               clearable
                               filterable
                               :filter-method="dataFilter"
                               v-el-select-loadmore.rangeNumber="loadmore(rangeNumber)"
                    >
                        <el-option
                            v-for="item in newUserList.slice(0,rangeNumber)"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.id"

                        />
                    </el-select>
                </el-form-item>


            </el-form>
        </div>
        <div class="menu">
            <modal-menu @comfirmHandle="save"></modal-menu>
        </div>
    </div>
</template>
<script>
import modalMenu from "@components/modal-menu.vue";
import {addRoleUser} from "@api/index"

export default {
    components: {
        modalMenu,
    },
    directives: {
        'el-select-loadmore': {
            bind(el, binding) {
                // 获取element-ui定义好的scroll盒子
                // const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                const SELECTWRAP_DOM = el.querySelector('.el-scrollbar__wrap');
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                    /**
                     * scrollHeight 获取元素内容高度(只读)
                     * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                     * clientHeight 读取元素的可见高度(只读)
                     * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                     * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                     * -2 ：个别浏览器获取像素不足整数，导致condition一直为false无法实现滚动加载
                     */
                    const condition = this.scrollHeight - this.scrollTop - 2 <= this.clientHeight;
                    if (condition) {
                        binding.value();
                    }
                }, true);
            }
        }
    },
    props: {
        newRow: Object,
        type: String,
        userOptions: Array,
        roleOptions: Array,
    },

    data() {
        return {
            form: {},
            rules: {
                roleName: [{required: true, message: '内容不能为空', trigger: ["blur", "change"]}],
                users: [{required: true, message: '内容不能为空', trigger: ["blur"]}],
            },
            userOptions1: [],
            newUserList: [], //人员过滤后的数据
            rangeNumber: 20,//初始加载条数
        };
    },

    mounted() {
        if (this.type == 'edit') {
            this.form = this.newRow
        }
        this.getList(this.userOptions)
    },
    methods: {
        getList(userList) {
            for (let i = 0; i < userList.length; i++) {
                this.newUserList.push(userList[i])
            }
        },
        dataFilter(val) {//未懒加载出来的数据也可被搜索到
            this.newUserList = []
            if (val) {
                this.newUserList = this.userOptions.filter((item) => {
                    // console.log(item,888)
                    if (item.userName && item.userName.indexOf(val) !== -1) {
                        return true
                    }
                })
            } else { //val为空时，还原数组
                this.getList(this.userOptions)
            }
        },

        loadmore() {
            return () => {
                this.rangeNumber += 5//滚动新增条数
            }
        },

        save() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let param = []
                    let roleId = ""
                    for (let item of this.roleOptions) {
                        if (item.roleName === this.form.roleName) {
                            roleId = item.id
                        }
                    }
                    let arr = this.form.users
                    for (let item of arr) {
                        for (let j of this.userOptions) {
                            if (j.id == item) {
                                param.push({id: "", roleId: roleId, userId: j.id, userName: j.userName})
                            }
                        }
                    }
                    addRoleUser(param).then(() => {
                        this.$message("操作成功")
                        this.$emit('confirmSuccess')
                        this.$emit('close')
                    })
                } else {
                    return false;
                }
            });
        },

    },
};
</script>

<style lang="scss" scoped>
.modal {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 50px 40px 0 20px;
}

::v-deep .el-form-item__error {
    margin-top: -13px;
}

::v-deep .el-form-item__label {
    font-weight: 900;
}

::v-deep .el-form-item {
    margin-bottom: 40px;
}

::v-deep .el-select__tags {
    max-height: 120px;
    overflow-y: auto;
}
</style>