当前位置: 首页 > news >正文

el-select下拉框处理分页数据,触底加载更多

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博客

http://www.lryc.cn/news/97442.html

相关文章:

  • 如何设计自动化测试脚本?一文5个步骤带你从0到1设计
  • PostgreSQL实战-数据库迁移部署
  • PHP数据库
  • Mybatis的基本操作--增删改查
  • Qt简单实现密码器控件
  • fpga_pwm呼吸灯(EP4CE6F17C8)
  • WPF实战学习笔记20-设置首页启动页
  • uniapp实现预约时间选择弹窗组件
  • opencv 之 外接多边形(矩形、圆、三角形、椭圆、多边形)使用详解
  • 断路器分合闸速断试验
  • 【Redis】如何实现一个合格的分布式锁
  • 组件化开发复习
  • 【设计模式】设计原则-里氏替换原则
  • v2ex站点base64编码解码
  • PostgreSQL数据库动态共享内存管理器——Dynamic shared memory areas
  • Redission分布式锁详解
  • 063、故障处理之快速恢复数据
  • 从零开始学习CTF
  • 【stable diffusion】保姆级入门课程05-Stable diffusion(SD)图生图-涂鸦重绘的用法
  • HBase 源码编译部署包
  • 备战秋招 | 笔试强训16
  • 01 Excel常用高频快捷键汇总
  • PHP Laravel 路由、中间件、数据库等例子
  • Unity小游戏——使被砍中的怪物四处飞散
  • hive之文件格式与压缩
  • 云原生容器内的一次pg_repack排错和解决过程
  • Centos Certbot 使用
  • VL163的基本信息
  • IntelliJ IDEA 2023.2 新版本,拥抱 AI
  • softmax回归