el-select中下拉数据太多,页面卡顿

问题

下拉框选项数据太多:由于下拉的数据过多,导致页面渲染复杂化,使得页面卡顿或者卡死问题。

解决办法

由于数据过多导致渲染卡顿,所以减少需要渲染的数据。首先,我们可以在拿到数据的时候进行懒加载,默认只展示20条数据,随着用户下拉的滑动,逐渐增加条数。这里我们自定义一个下拉的懒加载。其次,使用fildter-method方法进行过滤下拉数据。

示例代码

html 复制代码
<template>
	<el-select v-model="accept_id" v-selectloadmore:rangeNum="() => rangeNum += 10" size="mini" filterable :filter-		method="filterMethod" placeholder="选择接收方">
   <el-option v-for="item in acceptList.slice(0,rangeNum)" :key="item.id" :value="item.id" :label="item.name">
     {{ item.name }}
   </el-option>
 </el-select>
</template>
<script>
 export default {
   	directives: {
	    'selectloadmore': {
	      bind(el, binding) {
	        const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
	        selectDom.addEventListener('scroll', () => {
	          if (selectDom.scrollHeight - selectDom.scrollTop <= selectDom.clientHeight + 20) {
	            binding.value()
	          }
	        })
	      }
	    }
	 },
	data(){
		return {
			accept_id:undefined,
			acceptList:[],
			copyAcceptList:[],
			rangeNum: 20,
		}
	},
	mounted(){
		//获得acceptList的数据
	},
	methods:{
		filterMethod (){
			this.rangeNum = 20
			//请求接口,筛选数据
		}
	}
}
</script>
相关推荐
十里-1 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
D_C_tyu2 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
千里码aicood2 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
麦麦大数据4 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191144 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
明仔的阳光午后5 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人6 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
冲刺逆向7 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
西木之斤8 小时前
vue和react实例简单对比
vue.js·react.js
慧一居士8 小时前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js