vue el-select数据量太大，导致浏览器崩溃解决办法

下拉数据量太大，浏览器单线程渲染时间较长，会导致浏览器崩溃。为了解决这一问题，可以采用懒加载形式，完美解决

<el-col :span="24"><el-form-item label="入库物资"  prop="mids"><el-select v-model="mids" value-key="matId" multiple collapse-tags filterable :filter-method="filterMethod" placeholder="请选择需要入库的物资":popper-append-to-body="false"v-el-select-loadmore="loadmore" ref="containerSelect"@change="selectChanged($event)"style="width: 100% "><el-optionv-for="item in materialList":key="item.matId":label="`${item.matName}`":value="item"></el-option></el-select></el-form-item></el-col>

以上是下拉框代码段

:filter-method="filterMethod"自定义筛选方法，支持筛选

v-el-select-loadmore="loadmore" 懒加载方法

directives: {'el-select-loadmore':{bind(el, binding){const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM.addEventListener('scroll', function(){/*** scrollHeight 获取元素内容高度(只读)* scrollTop 获取或者设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，那它的scrollTop值默认为0* clientHeight 获取元素的可见高度(只读)* 如果元素滚动到底，下面的等式返回true,没有则返回false* **/const condition = (this.scrollHeight - this.scrollTop) <= (this.clientHeight+10);if(condition){binding.value();}})}}},

以上代码段跟data()同级别

data() {return {//懒加载下拉列表--startresourceTotal:0,resourceNum:1,resourcePage:10,resourceName:'',resourceOption:[],//懒加载下拉列表--end
}
}

/** 查询物资列表 */getListNoPage() {matListNoPage(this.query).then(response => {this.materialAllList = response.data;this.resourcePage = 10this.resourceNum = 1//由于物资太多，默认展示前500条this.materialList = response.data.slice(0,this.resourcePage);this.resourceTotal = this.materialList.length;this.resourceOption = this.materialAllList});},filterMethod(query){ //query是输入的关键字this.resourceName = querythis.resourcePage = 10this.resourceNum = 1if(query == ''){            this.materialList = this.materialAllList.slice(0,this.resourcePage)this.resourceOption = this.materialAllList}else{let result = [] //存储符合条件的下拉选项this.materialAllList.forEach(val=>{if(val.matName.indexOf(query)!=-1) result.push(val)})this.resourceOption = resultthis.materialList = result.slice(0,this.resourcePage) //只取前500个}this.resourceTotal = this.materialList.length;//下拉选项更改的时候设置滚动条高度为0this.$refs.containerSelect.$refs.scrollbar.wrap.scrollTop = 0;},//懒加载下拉列表--startloadmore(){if(this.resourceTotal === this.resourcePage){this.resourceNum++;this.searchLoadResource();}},searchLoadResource(){let result = []if(this.resourcePage*this.resourceNum < this.resourceOption.length){result = this.resourceOption.slice(this.resourcePage*(this.resourceNum-1),this.resourcePage*this.resourceNum)}else{result = this.resourceOption.slice(this.resourcePage*(this.resourceNum-1),this.resourceOption.length)}this.resourceTotal = result.length;if(this.materialList.length > 0){var pushFlg = '';// 这个循环是因为下拉框滚动条的时候，有时会揍两遍方法，导致数据重复添加// 循环中的判断是为了不让数据重复添加for(var i =0; i < result.length; i++){if(this.materialList.findIndex(item => item.matId === result[i].matId) < 0){pushFlg = 'push';break;}}if(pushFlg === 'push'){this.materialList = this.materialList.concat(result);}}else{this.materialList = result;}},//懒加载下拉列表--end

下拉选项变化时候涉及到滚动条定位问题，el-select设置滚动条再最顶端，复制下面代码即可

//下拉选项更改的时候设置滚动条高度为0this.$refs.containerSelect.$refs.scrollbar.wrap.scrollTop = 0;

vue el-select数据量太大，导致浏览器崩溃解决办法相关推荐

vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
模型训练遇到数据量太大而导致内存不够问题？今天教你一招
在比赛和工作中,我们经常会遇到数据量太大而导致内存不够的问题.这里可以细分为两种情况: 情况1:数据太大,无法加载到内存: 情况2:加载数据但训练时内存不够: 针对情况1可以考虑使用Spark或者Da ...
MyBatis中使用流式查询避免数据量过大导致OOM
欢迎关注方志朋的博客,回复"666"获面试宝典今天mybatis查询数据库中大量的数据,程序抛出: java.lang.OutOfMemoryError: Java heap s ...
R语言使用hexbin包的hexbin函数可视化散点图、应对数据量太大、且有数据重叠的情况、普通散点图可视化效果变差的情况、提供了对六边形单元格的二元绑定、通过图例颜色标定每一个区域数据点的数量
R语言使用hexbin包的hexbin函数可视化散点图.应对数据量太大.且有数据重叠的情况.普通散点图可视化效果变差的情况.hexbin函数提供了对六边形单元格的二元绑定.通过图例颜色标定每一个区域数 ...
mysql my.ini位置错误_解决mysql导入数据量很大导致失败及查找my.ini 位置（my.ini）在哪...
数据库数据量很大的数据库导入到本地时,会等很久,然而等很久之后还是显示失败: 这是就要看看自己本地的没mysql是否设置了超时等待,如果报相关time_out这些,可以把mysql.ini尾部添加ma ...
for循环数据量太大_中文文本分类roberta大力出奇迹之数据量大的问题
问题描述: 笔者在文本分类场景中使用了roberta+pool+dense的三分类模型.采用预训练模型做项目的时候经常苦于数据太少,模型泛化性差,因此收集了1300W数据.在我尝试暴力出奇迹的时候,遇 ...
api文档数据量太大崩溃_Tableau的API操作（一）-取消任务刷新
为啥需要取消数据刷新?公司Tableau使用的数据是发布到server上的.依托服务器强悍的性能,所有的报表.分析指标的交互都能做到快速响应.但是最近出现了一个问题,数据量过大导致刷新时间很长(6亿左 ...
Matlab曲线图导出eps数据量太大占用很多存储空间
Matlab曲线图导出eps数据量太大占用很多存储空间我的Figure是从simulink里的scope里导出的,因为是采样率很高的时域波形,所以数据量很大.从Figure里导出eps向量格式的话, ...

vue el-select数据量太大，导致浏览器崩溃解决办法

vue el-select数据量太大，导致浏览器崩溃解决办法相关推荐

最新文章

热门文章