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

实现Element Select选择器滚动加载

<template><el-selectpopper-class="more-tag-data"v-model="tagId"filterableplaceholder="请选择"@focus="focusTag"><el-optionv-for="(item, index) in taskTagLists":key="index":label="item.name":value="item.id"></el-option></el-select>
</template><script>
export default {data() {return {tagPage: {pageSize: 10,currentPage: 1,total: 0},taskTagLists: []}},created() {getTmpList({pageNum: this.tagPage.currentPage,pageSize: this.tagPage.pageSize}).then(res => {this.tagPage.total = res.data.totalthis.taskTagLists = res.data.list})},methods: {focusTag() {// 获取dom节点const domElementNode = document.querySelector('.more-tag-data .el-select-dropdown__wrap')// 注册下拉滚动事件domElementNode.addEventListener('scroll',  ()=>{const isBottom = domElementNode.scrollHeight - domElementNode.scrollTop <= domElementNode.clientHeightif (isBottom) {this.loadMore()}})},loadMore() {if(this.tagPage.currentPage * this.tagPage.pageSize < this.tagPage.total) {this.tagPage.currentPage ++this.getTageValue()}},getTageValue() {getTmpList({pageNum: this.tagPage.currentPage,pageSize: this.tagPage.pageSize}).then(res => {this.taskTagLists = this.taskTagLists.concat(res.data.list)})}}
}
</script>

注意:

        因为select组件在默认情况下是display:none的状态,所以不能把监听滚动事件放到mounted内,会获取不到元素class。

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

相关文章:

  • C++ 之 Vector 和 List
  • 力扣-448.找到所有数组中消失的数字
  • 常用gdb调试命令
  • 【动手学深度学习-Pytorch版】BERT预测系列——用于预测的BERT数据集
  • 【数据结构-字符串 三】【栈的应用】字符串解码
  • Stm32_标准库_10_TIM_显示时间日期
  • 10-SRCNN-使用CNN实现超分辨成像
  • cmd/bat 输出符,控制台日志输出到文件
  • ODrive移植keil(七)—— 插值算法和偏置校准
  • 【肌电信号】OpenSignals使用方法 --- 肌电信号采集及导入matlab
  • STM32 多功能按键中断
  • Linux-文件管理命令
  • JS DataTable中导出PDF右侧列被截断的问题解决
  • 学习笔记-MongoDB(复制集,分片集集群搭建)
  • Servlet与设计模式
  • Python学习基础笔记六十五——布尔值
  • ChatGPT生产力|实用指令(prompt)
  • 【大数据Hive】hive select 语法使用详解
  • Android---java线程优化 偏向锁、轻量级锁和重量级锁
  • 处理机调度
  • Webpack 解决:ReferenceError: dist is not defined 的问题
  • MySQL的index merge(索引合并)导致数据库死锁分析与解决方案 | 京东云技术团队
  • 第四章 网络层 | 计算机网络(谢希仁 第八版)
  • 课题学习(八)----卡尔曼滤波动态求解倾角、方位角
  • 仿真软件Proteus8.9 SP2 Pro 下载、安装、汉化详细图文教程
  • 振弦传感器和无线振弦采集仪在隧道安全监测的解决方案
  • c# xml 参数读取的复杂使用
  • 在Mac中使用 brew services start redis 命令启动、停止Redis服务报错
  • iapp源码-----比较经典
  • 为什么手机会莫名多出许多软件?