Element UI-Select下拉请求

最新推荐文章于 2024-05-08 11:55:56 发布

itmacy

最新推荐文章于 2024-05-08 11:55:56 发布

阅读量205

点赞数

分类专栏： Element UI 文章标签： vue.js

本文链接：https://blog.csdn.net/itmacy/article/details/134251322

版权

Element UI 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

通过自定义v-loadmore指令，来实现select组件下拉时，请求新的数据。这里只是伪代码。
自定义指令

    directives: {
        'loadmore': {
            inserted(el, binding) {
                const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
                SELECTWRAP_DOM.addEventListener('scroll', function() {
                    const condition = this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight
                    if (condition) {
                        binding.value()
                    }
                })
            }
        }
    },

使用指令

<el-select v-model="filterParam.cityId"  filterable placeholder="请选择区域" clearable v-loadmore="loadMore">
    <el-option v-for="(item, index) in list1" :key="index" :label="item.label" :value="item.id"></el-option>
</el-select>