element 下拉框el-select滚动条加载

<template>
    <el-select v-model="queryForm.fz" clearable  placeholder="请选择" v-el-select-loadmore="loadmore">
        <el-option v-for="(item) in dictData_fz" :key="item.value" :label="item.value" :value="item.value"></el-option>
        <span class="optionSpanClassLoad" v-if="query_fzPage.pageLoading"><i class="el-icon-loading"></i> 加载中...</span>
        <!-- pageLoading -->
    </el-select>
</template>

<script>
export default {
    name: 'signIn',
    directives: {
        'el-select-loadmore': {
            bind(el, binding) {
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
                SELECTWRAP_DOM.addEventListener('scroll', function () {
                /**
                    * scrollHeight 获取元素内容高度
                    * scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0
                    * clientHeight 获取元素的可见高度
                    * 如果元素滚动到底，下面的等式返回true,没有则返回false
                    *
                **/
                const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight + 10);
                if (condition) {
                    binding.value();
                }
                })
            }
        }
    },
    data () {
        return {
            page: 1,
            queryForm: {
                fz: ''
            },
            query_fzPage: {
                pageLoading: false,
                pageNumToal: 1000
            },
            dictData_fz: [
                {
                    value: 1
                },
                {
                    value: 2
                },
                {
                    value: 3
                },
                {
                    value: 4
                },
                {
                    value: 5
                },
                {
                    value: 6
                },
                {
                    value: 7
                },
                {
                    value: 8
                },
                {
                    value: 9
                },
                {
                    value: 10
                }
            ]
        }
    },
    methods: {
        loadmore(){
            console.log(this.query_fzPage.pageLoading)
            if (this.query_fzPage.pageLoading){

            } else {
                this.query_fzPage.pageLoading = true
                setTimeout(() => {
                    this.page++
                    let arr = [
                    {
                    value: 1 + (this.page - 1) * 10
                },
                {
                    value: 2 + (this.page - 1) * 10
                },
                {
                    value: 3 + (this.page - 1) * 10
                },
                {
                    value: 4 + (this.page - 1) * 10
                },
                {
                    value: 5 + (this.page - 1) * 10
                },
                {
                    value: 6 + (this.page - 1) * 10
                },
                {
                    value: 7 + (this.page - 1) * 10
                },
                {
                    value: 8 + (this.page - 1) * 10
                },
                {
                    value: 9 + (this.page - 1) * 10
                },
                {
                    value: 10 + (this.page - 1) * 10
                }
                    ]
                    this.dictData_fz.push(...arr)
                    this.query_fzPage.pageLoading = false
                },5000)
            }
        }
    },
    mounted() {

    }
}
</script>

<style>
    @import url('./SignIn.css');
</style>

<style scoped>
.optionSpanClassLoad{
    display: inline-block;
    width: 100%;
    height: 2.125rem;
    line-height: 2.125rem;
    text-align: center;
    font-size: 14px;
    color: #015bd5;
}
.optionSpanClassbtn{
    display: inline-block;
    width: 100%;
    height: 2.125rem;
    line-height: 2.125rem;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
.optionSpanClassbtn:hover{
    color: #015bd5;
}
</style>