iview select组件在大数据情况下虚拟加载处理方式

news/2024/4/17 8:24:52

   select 组件在几千上万条数据的时候特别卡,调试发现option组件渲染太多,导致整个页面都卡,通过调研发现可以通过虚拟加载的方式动态渲染option,亲测上万数据一点都不卡,废话不说,上代码

虚拟加载用的是 vue-virtual-scroller 具体怎么安装和使用,这就不介绍,网上一大把,下面是select结合 vue-virtual-scroller 的代码,由于option上包了一成代码,会导致select选中的样式不会自动加上,需要手动在option上加上选中样式

 <Select v-model="nodeData.fileUniqueList" multiple filterable filter-by-labelref="select"@on-query-change="fileQueryChange"style="width:100%"><recycle-scrollerclass="virtual-list":buffer="200":prerender="10"style="height: 180px":item-size="30"key-field="value":items="fileList"><template v-slot="{ item, index }"><Option:class="{'ivu-select-item selected':nodeData.fileUniqueList.includes(item.value)}":value="item.value" :key="item.value" :label="item.fileName">{{ item.fileName }}</Option></template></recycle-scroller></Select>

在 mounted 中把select的自动过滤方法重写,这一步很关键,没这一步会导致搜索的option被强制重写,这样永远都渲染不出来数据
 

 this.$nextTick(() => {// 替换过滤函数this.$refs.select.validateOption = () => true;});

然后就是自定义查询方法,通过 on-query-change事件自己写过滤方法,我这是先把查出来的数据备份了一份,然后在备份的数据里面查找在深度拷贝给对象

fileQueryChange(v) {if (v) {let data = deepClone(this.fileListBak.filter(f => f.fileName.indexOf(v) >= 0))this.fileList = data} else {this.fileList = deepClone(this.fileListBak)}},

最后就是返现问题,由于动态渲染不会把所有的option都渲染出来,导致不能返现,调试了下发现多选的时候,select组件是在values里面plus值,所以在数据返回后,循环以前选中的,然后查找,最后给values赋值,这是多选的方式,单选应该也是大同小异,如果不行,去调试一下看单选是怎么赋值的

    this.$refs.select.values = []this.nodeData.fileUniqueList.forEach(f => {let data = this.fileList.find(d => d.value == f)this.$refs.select.values.push({label: data.fileName,tag: undefined,value: f})})


https://www.xjx100.cn/news/3118795.html

相关文章

Linux ubuntu20.04 安装使用 Intel sgx

文章目录 前言一、简介二、安装Intel SGX Software Stack2.1 安装Intel SGX driver2.2 Build the Intel SGX SDK and Inte SGX PSW Package2.3 Build the Intel SGX SDK and Intel SGX SDK Installer2.4 Install the Intel(R) SGX SDK2.5 Build the Intel SGX PSW and Intel SG…

数据仓库数据管理模型

数据仓库分为贴源层、数据仓库层、数据服务层&#xff0c;有人叫做数仓数据模型&#xff0c;或者叫"数据管理模型”。 我们为什么要进行数据分层管理&#xff0c;下图的优点介绍已经说得比较明确&#xff0c;再补充几点&#xff1a; 保障数据一致性&#xff1a;上层的数…

linux安装docker(脚本一键安装配置docker)

1、创建脚本 vi initDocker.sh #安装前先更新yum&#xff0c;防止连接镜像失败 yum -y update#卸载系统之前的docker&#xff08;可选择&#xff0c;我这里直接注释了&#xff09; #yum remove docker docker-client docker-client-latest docker-common docker-latest docke…

基于springboot实现私人健身与教练预约管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现私人健身与教练预约管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应…

【论文笔记】SDCL: Self-Distillation Contrastive Learning for Chinese Spell Checking

文章目录 论文信息Abstract1. Introduction2. Methodology2.1 The Main Model2.2 Contrastive Loss2.3 Implementation Details(Hyperparameters) 3. Experiments代码实现个人总结值得借鉴的地方 论文信息 论文地址&#xff1a;https://arxiv.org/pdf/2210.17168.pdf Abstrac…

ElasticSearch之cat indices API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/indices?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; health status index uuid …

PHP项目用docker一键部署

公司新项目依赖较多&#xff0c;扩展版本参差不一&#xff0c;搭建环境复杂缓慢&#xff0c;所以搭建了一键部署的功能。 docker-compose build 构建docker docker-compose up 更新docker docker-compose up -d 后台运行docker docker exec -it docker-php-1 /bin/bas…

【UE】中文字体 发光描边材质

效果 步骤 1. 先将我们电脑中存放在“C:\Windows\Fonts”路径下的字体导入UE 点击“全部选是” 导入成功后如下 2. 打开导入的“SIMSUN_Font”&#xff0c;将字体缓存类型设置为“离线” 点击“是” 这里我选择&#xff1a;宋体-常规-20 展开细节面板中的导入选项 勾选“使用距…