当前位置: 首页 > 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。

相关文章:

实现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.n…...

C++ 之 Vector 和 List

Vector vector 是C STL中最常用的容器&#xff0c;支持存储多种类型的数据。 与数组相比&#xff0c;它的大小是可变的&#xff0c;因此也会被称为动态数组。 使用它&#xff0c;需要包含头文件&#xff1a; #include <vector>定义的结构&#xff1a; vector<数据类…...

力扣-448.找到所有数组中消失的数字

Idea 模拟 class Solution { public:vector<int> findDisappearedNumbers(vector<int>& nums) {int n nums.size();vector<int> a(n 1, 0);for(int i : nums) a[i];vector<int> ans;for(int i 1; i < n; i) if(!a[i]) ans.emplace_back(i);r…...

常用gdb调试命令

常见gdb调试命令 命令名 命令缩写 命令说明 backtrace bt 查看函数调用堆栈 frame f 查看栈帧 list l 查看源码 print p 打印内部变量值 info i 查看程序状态 display disp 跟踪某变量,每次停下来则显示值 run r 开始运行程序 continue c 继续程序运行&#xff0c;直到下一个断…...

【动手学深度学习-Pytorch版】BERT预测系列——用于预测的BERT数据集

本小节的主要任务即是将wiki数据集转成BERT输入序列&#xff0c;具体的任务包括&#xff1a; 读取wiki数据集生成下一句预测任务的数据—>主要用于_get_nsp_data_from_paragraph函数从输入paragraph生成用于下一句预测的训练样本&#xff1a;_get_nsp_data_from_paragraph生…...

【数据结构-字符串 三】【栈的应用】字符串解码

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【字符串转换】&#xff0c;使用【字符串】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…...

Stm32_标准库_10_TIM_显示时间日期

利用TIM计数耗费1s,启动中断&#xff0c;秒表加一 时间显示代码&#xff1a; #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h"uint16_t num 0; TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStructure; NVIC_I…...

10-SRCNN-使用CNN实现超分辨成像

文章目录 utils_dataset.pymodel.pytrain.pyuse.py主要文件 utils_dataset.py 工具文件,主要用来制作dataset,便于加入dataloader,用于实现数据集的加载和并行读取 model.py 主要写入网络(模型) train.py 主要用于训练 use.py 加载训练好的模型,用于测试或使用 utils_dat…...

cmd/bat 输出符,控制台日志输出到文件

前言 略 输出符 A > B将A执行结果覆盖写入B A >> B将A执行结果追加写入B 常用句柄 句柄句柄的数字代号描述STDIN0键盘输入STDOUT1输出到命令提示符窗口STDERR2错误输出到命令提示符窗口 控制台日志输出到文件 1.bat 1>d:\log.log将控制台日志输出到文件 d:…...

ODrive移植keil(七)—— 插值算法和偏置校准

目录 一、角度读取1.1、硬件接线1.2、程序演示1.3、代码说明 二、锁相环和插值算法2.1、锁相环2.2、插值2.3、角度补偿 三、偏置校准3.1、硬件接线3.2、官方代码操作3.3、移植后的代码操作3.4、代码说明3.5、SimpleFOC的偏置校准对比 ODrive、VESC和SimpleFOC 教程链接汇总&…...

【肌电信号】OpenSignals使用方法 --- 肌电信号采集及导入matlab

一、 多通道采集教学 1. 数据线连接 将PLUX设备通过USB或蓝牙与电脑连接&#xff0c;注意确认在几号通道接线。 2.实时数据采集可视化 进行设置。需要在软件中选择你的PLUX设备&#xff0c;并配置相关的参数&#xff0c;如采样率、分辨率、信号类型等 3 支持数据回放和…...

STM32 多功能按键中断

key1 开关实现led1亮灭,key2开关实现蜂鸣器开关,key3开关实现风扇开关 main.c #include "uart.h" #include "key_it.h" #include "led.h" int main() {char c;char *s;uart4_init();//串口初始化all_led_init();key_it_config();fengshan_init…...

Linux-文件管理命令

绝对路径&#xff1a;从根目录开始描述的路径 pwd输入即为绝对路径&#xff0c; 开头一定是“/”&#xff0c;因为一定是从根目录开始走 相对路径&#xff1a;从当前路径开始描述的路径&#xff0c;开头不一定是“/”&#xff0c;因为不一定是从根目录开始走的 .:是当前目录 。…...

JS DataTable中导出PDF右侧列被截断的问题解决

JS DataTable中导出PDF右侧列被截断的问题解决 文章目录 JS DataTable中导出PDF右侧列被截断的问题解决一. 问题二. 解决办法三. 代码四. 参考资料 一. 问题 二. 解决办法 设置PDF大小和版型 orientation: landscape, pageSize: LEGAL,上述代码设置打印的PDF尺寸为LEGAL&…...

学习笔记-MongoDB(复制集,分片集集群搭建)

复制集群搭建 基本介绍 什么是复制集&#xff1f; 复制集是由一组拥有相同数据集的MongoDB实例做组成的集群。 复制集是一个集群&#xff0c;它是2台及2台以上的服务器组成&#xff0c;以及复制集成员包括Primary主节点&#xff0c;Secondary从节点和投票节点。 复制集提供了…...

Servlet与设计模式

1 过滤器和包装器 过滤器可以拦截请求及控制响应&#xff0c;而servlet对此毫无感知。过滤器有如下作用&#xff1a; 1&#xff09;请求过滤器&#xff1a;完成安全检查、重新格式化请求首部或体、建立请求审计日志。 2&#xff09;响应过滤器&#xff1a;压缩响应流、追加或…...

Python学习基础笔记六十五——布尔值

布尔对象&#xff1a; Python中有一种对象类型称之为布尔对象&#xff08;英文叫bool&#xff09;。 布尔对象只有两种取值&#xff0c;True和False。对应的是真和假&#xff0c;或者说是和否。True对应的是&#xff0c;False对应的是否。 我觉得这句话是一个关键&#xff1a…...

ChatGPT生产力|实用指令(prompt)

GPT已经成为一个不可或缺的科研生产力了&#xff0c;但是大多数人只知晓采用直接提问、持续追问以及细节展开的方式来查阅相关资料&#xff0c;本文侧重于探讨“限定场景限定角色限定主题”、“可持续追问细节展开”等多种方式来获取更多信息&#xff0c;帮人们解决更多问题。 …...

【大数据Hive】hive select 语法使用详解

目录 一、前言 二、Hive select 完整语法树 三、Hive select 操作演示 3.1 数据准备 3.1.1 创建一张表 3.1.2 将数据load加载到t_usa_covid19表 3.1.3 再创建一张分区表 3.1.4 使用动态分区插入数据 3.2 select 常用语法 3.2.1 查询所有字段或者指定字段 3.2.2 查询…...

Android---java线程优化 偏向锁、轻量级锁和重量级锁

java 中的线程是映射到操作系统原生线程之上的&#xff0c;如果要阻塞或唤醒一个线程就需要操作系统的帮忙&#xff0c;这就需要从用户态转换到核心态。状态转换需要花费很多时间&#xff0c;如下代码所示&#xff1a; private Object lock new Object();private int value;p…...

处理机调度

目录 处理机调度概述 处理机调度的层次 低级调度 中级调度 高级调度 进程调度 进程调度的时机 进程调度的方式 非抢占式调度方式 抢占式调度方式 调度算法的评价指标 调度算法 先来先服务调度算法&#xff08;FCFS&#xff0c;First Come First Serve&#xff09; …...

Webpack 解决:ReferenceError: dist is not defined 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; ReferenceError: dist is not defined 中文为&#xff1a; ReferenceError&#xff1a;dist 未定义 其二、问题描述为&#xff1a; 想在 webpack 的配置中&#xff0c;创建一个 dist 文件夹来存放 npm run build 打包后…...

MySQL的index merge(索引合并)导致数据库死锁分析与解决方案 | 京东云技术团队

背景 在DBS-集群列表-更多-连接查询-死锁中&#xff0c;看到9月22日有数据库死锁日志&#xff0c;后排查发现是因为mysql的优化-index merge&#xff08;索引合并&#xff09;导致数据库死锁。 定义 index merge(索引合并)&#xff1a;该数据库查询优化的一种技术&#xff0…...

第四章 网络层 | 计算机网络(谢希仁 第八版)

文章目录 第四章 网络层4.1 网络层提供的两种服务4.2 网际协议IP4.2.1 虚拟互连网络4.2.2 分类的IP地址4.2.3 IP地址与硬件地址4.2.4 地址解析协议ARP4.2.5 IP数据报的格式4.2.6 IP层转发分组的流程 4.3 划分子网和构造超网4.3.1 划分子网4.3.2 使用子网时分组的转发4.3.3 无分…...

课题学习(八)----卡尔曼滤波动态求解倾角、方位角

一、 卡尔曼滤波 卡尔曼滤波的应用要求系统和底层过程的测量模型都是线性的。离散时间线性状态空间系统的描述为: x k Φ k , k − 1 x k − 1 G k − 1 w k − 1 x_k\Phi_{k,k-1}x_{k-1}G_{k-1}w_{k-1} xk​Φk,k−1​xk−1​Gk−1​wk−1​    式中 Φ k , k − 1 \Phi_{…...

仿真软件Proteus8.9 SP2 Pro 下载、安装、汉化详细图文教程

Proteus8.9 安装教程 视频教程一、安装软件解压二、软件安装常见问题及解决方法&#xff1a;三、汉化 Proteus8.9 SP2 Pro 安装教程 本破解教程仅供个人及 proteus 8.9粉丝们交流学习之用&#xff0c;请勿用于商业用途&#xff0c; 谢谢支持。此版本为Proteus8.9 SP2 Pro。其他…...

振弦传感器和无线振弦采集仪在隧道安全监测的解决方案

振弦传感器和无线振弦采集仪在隧道安全监测的解决方案 隧道作为交通工程的重要组成部分&#xff0c;具有极高的安全风险&#xff0c;因此隧道安全监测是必不可少的。振弦传感器和无线振弦采集仪作为隧道安全监测的两种重要设备&#xff0c;能够有效地监测隧道的振动情况&#…...

c# xml 参数读取的复杂使用

完整使用2 生产厂家里面包含很多规格型号,一个规格型号里面包含很多出厂序列号,点击下一步如果检测到填充的和保存的不一样 就新增一条(如检测到生产厂家相同,但是规格型号不同,就新增一组规格型号)。 界面一:新增界面 界面2 删除界面 界面一:新增界面 load 其中…...

在Mac中使用 brew services start redis 命令启动、停止Redis服务报错

一、问题现象 启动Redis服务命令&#xff1a; brew services start redis异常信息如下&#xff1a; Error: uninitialized constant Homebrew::Service::System /opt/homebrew/Library/Homebrew/macos_version.rb:150:in const_missing /opt/homebrew/Library/Taps/homebrew…...

iapp源码-----比较经典

2.0底部菜单导航栏.rar: https://url18.ctfile.com/f/7715018-958700751-6096bd?p6511 (访问密码: 6511) 2.0涟漪_拖动条控制音乐播放.rar: https://url18.ctfile.com/f/7715018-958700754-4cec13?p6511 (访问密码: 6511) 2.0手电筒.rar: https://url18.ctfile.com/f/7715018…...