Element-ui中选择器（Select）数据多过导致渲染慢、页面卡顿的问题

热心肠的小哥

已于 2023-08-22 15:31:58 修改

阅读量959

点赞数 1

分类专栏： vue 文章标签： javascript vue.js 前端

于 2023-08-22 15:20:04 首次发布

本文链接：https://blog.csdn.net/ploki8/article/details/132428212

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码：

关键：visibleChange、v-el-select-loadmore；如果加上搜索：filterable、filter-method

<el-select 
filterable 
clearable
:filter-method="filterMethod"
v-model="ruleForm" 
placeholder="请选择VLAN"
:loading="searchLoad"
@change="changevlan(ruleForm)" 
@visible-change="visibleChange"
style="width: 300px;position: absolute;left: 90px;"
v-el-select-loadmore="loadMore(rangeNumber)"
>
	<el-option
		v-for="option in orgDataRight.slice(0, rangeNumber)" 
		:key="option.subid" 
		:value="option.subid" 
		:label="option.name"
		>
	</el-option>
</el-select>

数据：

data() {
	return {
		searchLoad:false,
		rangeNumber:10,
		orgDataRight:[],
		resOptions:[],
		timer:null,
	}
},
mounted: function() {
	this.ajaxOrgs();
},
methods: {
		//获取下拉数据
		ajaxOrgs(param) {
					this.$axios.get('/vlan/subnet',{param:{area_id:param}}).then((res)=> {
						let data = res.data;
						var vlandata=[];
						data.data.map((value,index)=>{
						if(value.subnet!=" "){
								var name=value.name+" "+"("+value.subnet+")";
								vlandata.push({
									id:value.id,
									name:name,
									subid:value.sub_id,
								})
							}
						})
						this.orgDataRight = vlandata;
						this.resOptions = vlandata;	//备份一遍原始数据

					})
				},

		loadMore(n) {
			return () => (this.rangeNumber += 5);
		},
		// 筛选方法
		filterMethod(query) {
			if (this.timer != null) clearTimeout(this.timer);
			!this.searchLoad && (this.searchLoad = true);
			this.timer = setTimeout(() => {
				this.orgDataRight = query? this.resOptions.filter(el => el.name(这里换成你数据的lebel参数名,我的是用name).toLowerCase().includes(query.toLowerCase())) : this.resOptions;
				clearTimeout(this.timer);
				this.searchLoad = false;
				this.rangeNumber = 10;
				this.timer = null;
			}, 500);
		},
		// 监听select下拉框的显示和隐藏
		visibleChange(flag) {
			if(flag){
				this.filterMethod()
			}
			// 初始化默认值
			this.rangeNumber = 10;
		}
}

自定义组件：

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