el-option滚动到底部自动调用接口

266 阅读1分钟

添加vue指令loadMore

Vue.directive('loadMore', {
    // el-select 滚动到底部
    inserted: (el, binding) => {
        const SelectWrap = el.querySelector('.el-select-dropdown__wrap');
        function handleScroll() {
            const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
            if (condition) {
                binding.value();
            }
        }
        SelectWrap.addEventListener('scroll', handleScroll);
    }
});

使用:记得将popper-append-to-body设置为false,否则获取不到DOM

<el-select
    v-model="value"
    v-load-more="loadMore"
    v-loading="loading"
    :popper-append-to-body="false"
    filterable
    @change="handleChange">
    <el-option
        v-for="(i,index) in list"
        :key="i.id"
        :label="i.name"
        :value="i.name">
    </el-option>
</el-select>

loadMore函数

loadMore() {
    // 获取数据逻辑
    console.log('到底了');
},