日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

el-select下拉框處理分頁數據,觸底加載更多

作者:葉子yes 更新時間: 2023-07-27 編程語言

1、聲明自定義指令:

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 - this.scrollTop <= this.clientHeight;
                if (condition) {
                    binding.value();
                }
            });
        }
    }
},

2、使用自定義指令v-loadmore:

<el-select filterable v-model="form.standardDevice" placeholder="請選擇" clearable v-loadmore="loadMore" @change="handleChange">
   <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName" :value="item.serialNumber"></el-option>
   <el-option v-if="selectLoading" v-loading="selectLoading" value=""></el-option>
</el-select>

3、發送請求加載數據

//滾動條滾動到底部
loadMore(){
    //頁數加一
    this.pageNum ++ 
    //發送網絡請求
    this.getDeviceList()
},

參考:el-select滾動到底部加載更多(分頁加載數據)_el-select 觸底加載分頁_天道酬勤_鹿的博客-CSDN博客

原文鏈接:https://blog.csdn.net/lq313131/article/details/131854820

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新