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

el-select应用虚拟列表,避免过多数据导致浏览器卡死

el-select:

        element-ui组件中的select下拉选择组件,支持单选、多选等

虚拟列表:

        虚拟列表是一种优化技术,用于处理大型列表。在传统的列表中,当用户滚动到底部时,列表会加载所有的数据,这可能导致性能问题和内存泄漏。虚拟列表通过只加载当前可见的部分数据,而不是整个列表的数据来解决这个问题。当用户滚动到新的区域时,虚拟列表会自动加载新的数据,从而提高性能和响应速度。这种技术通常与虚拟滚动结合使用,可以在保持高性能和流畅性的同时,支持大量的数据呈现。

背景:

        在做管理系统,下拉选择框是个必备功能,在实际开发中,下拉数据量是不可控的,el-select虽然有过滤筛选等功能,但是如果数据过大的时候,会导致浏览器卡死,在切换页面时,销毁这个也很耗时,导致页面切换体验性很差,所以需要处理这种情况!

最简单处理方案:

        默认下拉是空,只支持过滤筛选,实现:filterMethod,可以手动控制展示的数据量

最终处理方案:

        用虚拟列表策略处理,重新封装el-select组件

<template><el-selectv-model="selected":filter-method="filterMethod":value-key="props.key ? props.key : props.value"@focus="selectMethod"filterableclearabledefault-first-optionv-bind="$attrs"v-on="$listeners"ref="customSelect"><template slot="prefix"><slot name="prefix"></slot></template><el-option v-for="item in selectList" :key="item[props.key ? props.key : props.value]" :value="item[props.value]" :label="item[props.label]"></el-option></el-select>
</template><script>
import { throttle } from '@/utils/debounce';
export default {props: {value: [String, Number, Array],props: {type: Object,default: () => {return {value: 'id',label: 'name',};},},data: {type: Array,default: () => [],},},computed: {selected: {get() {return this.value;},set(val) {this.$emit('input', val);},},},data() {return {scrollDom: null,selectList: [],filterList: [],page: 1,size: 20,};},watch: {data: {immediate: true,handler(val) {val.length && this.initSelect();},},},mounted() {this.scrollDom = this.$refs.customSelect.$refs.scrollbar.$refs.wrap;this.scrollDom.addEventListener('scroll', throttle(this.handlerScroll, 200));},beforeDestroy() {this.scrollDom.removeEventListener('scroll', throttle(this.handlerScroll, 200));},methods: {handlerScroll() {// TODO:监听滚动,触发加载if (this.scrollDom.scrollHeight - this.scrollDom.scrollTop - 1 <= this.scrollDom.clientHeight) {this.loadData();}},firstLoad() {// 初始化数据this.page = 1;const len = this.filterList.length;if (len <= this.size) {this.selectList = this.filterList;} else {this.selectList = this.filterList.slice(0, this.size);}},selectMethod() {let param = this.selected;if (Object.prototype.toString.call(this.selected) === '[object Array]') {param = this.selected.join('');}if (param) {// TODO:有值不需要重置查询, 但当组件初始化的时候selected有值回显有问题} else {this.filterMethod('');}},filterMethod(str) {this.filterList = this.data.filter(item => {return item[this.props.label] && item[this.props.label].indexOf(str) > -1;});this.firstLoad();},initSelect() {let param = this.selected;if (Object.prototype.toString.call(this.selected) === '[object Array]') {param = this.selected.join('');}if (param) {// 筛选this.filterList = this.data.filter(item => {return param.indexOf(item[this.props.value]) > -1;});this.selectList = this.filterList;}},loadData() {if (this.filterList.length <= this.page * this.size) {// 最后一页return;}++this.page;const len = this.page * this.size;if (this.filterList.length <= len) {this.selectList = this.filterList;} else {this.selectList = this.filterList.slice(0, len);}},},
};
</script>

相关文章:

el-select应用虚拟列表,避免过多数据导致浏览器卡死

el-select&#xff1a; element-ui组件中的select下拉选择组件&#xff0c;支持单选、多选等 虚拟列表&#xff1a; 虚拟列表是一种优化技术&#xff0c;用于处理大型列表。在传统的列表中&#xff0c;当用户滚动到底部时&#xff0c;列表会加载所有的数据&#xff0c;这可能导…...

ES6之函数的扩展

函数的扩展 文章目录 函数的扩展1&#xff1a;与解构赋值默认值结合使用2&#xff1a;参数默认值空对象2.1 案例一2.2 案例二2.3 案例三2.4 案例四 3&#xff1a;undefined null参数默认值的区别4&#xff1a;函数length5&#xff1a;作用域5.1 全局变量5.2&#xff1a;局部变量…...

【PPT制作】基础篇

文章目录 一、PPT制作必要的基础设置1.1 自动保存1.2 字体嵌入1.3 撤销步数1.4 图像大小和质量 二、必备快捷键三、设计四原则四、总结 ヾ(๑╹◡╹)&#xff89;" 没有坚持的努力&#xff0c;本质上并没有多大意义ヾ(๑╹◡╹)&#xff89;" 一、PPT制作必要的基础…...

尚硅谷CSS学习笔记

什么是css css&#xff08;层叠样式表&#xff09; 它是一种标记语言&#xff0c;用于给HTML结构设置样式。简单理解css可以美化html&#xff0c;实现结构与样式的分离。 <link rel"shortcut icon" href"favicon.ico" type"image/x-icon"&g…...

MYSQL的日志管理

MySQL中有几种类型的日志记录&#xff0c;分别用于记录不同的操作和事件。以下是MySQL中常见的日志类型 错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c;以及服务器在运行过程中发生任何严重错误时的相关信息。当数据…...

微信小程序在TS模板下引入TDesign组件

介绍 TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库 步骤 新建一个空白项目&#xff0c;这里可以选择TS-基础模板 新建项目目录结构如图所示&#xff1a; 注意这里其实小程序的文件都存放在miniprogram文件夹下&#xff0c;…...

alsa pcm接口之pcm设备的状态STATE

应用和库之间的协作: ALSA pcm api设计使用状态来确定应用程序和库之间的通信阶段,实际的状态可以被决定通过使用snd_pcm_state调用,下面列举出来状态: SND_PCM_STATE_OPEN: 表示pcm设备被打开的状态,使用了snd_pcm_open()之后进入该状态,并且让snd_pcm_hw_params()调用失败后,…...

【UE】在游戏运行时,通过选择uasset来生成静态网格体

目录 主要流程 步骤 一、创建用于包含静态网格体的Actor蓝图 二、按钮点击事件 效果 主要流程 用户点击按钮后产生一个文件对话框&#xff0c;用户通过文件对话框选择指定的文件夹&#xff0c;我们获取到这个文件夹路径后处理成“按路径获取资产”节点所需的输入&#x…...

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

PC端高德地图使用步骤&#xff1a; 1、注册并登录高德开放平台获取 2、安装高德依赖&#xff08;amap-jsapi-loader&#xff09; 3、初始化地图 4、首次打开地图获取当前定位并标记 5、根据已有地址自动定位到指定地址并标记 6、新增、清除标记及自定义信息窗体 7、鼠标点击地…...

服务器数据恢复-DS5300存储raid5硬盘出现坏道离线的数据恢复案例

服务器数据恢复环境&#xff1a; 某单位一台DS5300存储&#xff0c;1个主机4个扩展柜&#xff0c;组建了2组RAID5&#xff08;一组27块硬盘&#xff0c;一组23块盘&#xff09;。27块盘的那组RAID5阵列存放Oracle数据库文件&#xff0c;存储系统一共分了11个卷。 服务器故障&a…...

K8S存储总结持久化存储解决方案(以NFS为例)

目录 K8S存储 一、emptydir 1. emptydir是什么 2. emptydir例子 二、hostpath hostpath 是什么 hostpath 例子 弊端 三、持久化存储 1.Persistent Volume(PV) 2.Persistent Volume Claim(PVC) 3.PV/PVC结合NFS使用实践&#xff08;持久存储&#xff09; 1. NFS服务…...

vue3+ts项目02-安装eslint、prettier和sass

创建项目 项目创建 安装eslint yarn add eslint -D生成配置文件 npx eslint --init安装其他插件 yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node babel/eslint-parser vue-e…...

sface人脸相似度检测

sface人脸相似度检测&#xff0c;基于OPENCV&#xff0c;人脸检测采用yunet&#xff0c;人脸识别采用sface&#xff0c;支持PYTHON/C开发&#xff0c;图片来自网络&#xff0c;侵权请联系本人立即删除 yunet人脸检测sface人脸识别&#xff0c;检测两张图片的人脸相似度...

设计模式 - 行为型模式考点篇:模板方法模式(概念 | 案例实现 | 优缺点 | 使用场景)

目录 一、行为型模式 1.1、模板方法模式 1.1.1、概念 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 一句话概括行为型模式 行为型模式&#xff1a;类或对象间如何交互、如何划分职责&#xff0c;从而更好的完成任务. 1.1、模板方法模式 1.1.1、概念 …...

因为计算机中找不到mfc140.dll无法启动修复步骤分享

mfc140.dll是Microsoft Foundation Class Library&#xff08;微软基础类库&#xff09;的一个组件&#xff0c;它是许多Windows应用程序&#xff08;尤其是使用MFC编写的程序&#xff09;所必需的动态链接库。MFC&#xff08;Microsoft Foundation Classes&#xff09;是一个用…...

【Python基础-Pandas】解决Pandas会自动把None转成NaN的问题

1. 背景 目前dataframe中的数据如下&#xff0c;power字段表示功率值&#xff0c;第一个值为20.0&#xff0c;第二个值为None。需要计算电量值&#xff0c;电量 功率 * 0.25&#xff0c;并保存到energy字段中&#xff0c;如果功率值为None&#xff0c;则电量值也为None。 pow…...

学习记忆——数学篇——案例——代数——方程——一元二次方程

重点记忆法 a x 2 b x c 0 ax^2bxc0 ax2bxc0 整体可以由&#xff1a; 根&#xff08;多少&#xff0c;正负&#xff0c;区间&#xff09; ⟹ \Longrightarrow ⟹ △ △ △ ⟹ \Longrightarrow ⟹ 求根公式 x 1 , 2 x_{1,2} x1,2​ − b △ 2 a \frac{-b\sqrt{△}}{2a} 2…...

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…...

【java学习】数组中涉及的常见算法-含冒泡排序(11)

文章目录 1. 最大值、最小值、总和、平均数2. 数组的复制、反转3. 数组元素的排序3.1. 排序方式3.1.1. 冒泡排序 1. 最大值、最小值、总和、平均数 代码如下&#xff1a; public class Test1 {public static void main (String[] args) {int[] arr new int[] {4,2,7,1,3,5};/…...

useEffect Hook使用纠错

React的useEffect Hook是用于处理副作用操作的重要工具。副作用操作通常包括数据获取、订阅、手动DOM操作等。在使用useEffect时&#xff0c;有一些常见的错误和最佳实践需要注意。 以下是一些常见的useEffect使用错误以及如何解决它们的建议&#xff1a; 未清除订阅或定时器…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

渗透实战PortSwigger Labs指南:自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...