解决el-select数据量过大导致页面卡顿

问题描述

页面中el-select数据过大时页面操作需要等待，有时甚至卡死。我们可以通过滚动加载与自定义筛选相结合来解决这个问题。

---

解决方案：

<template>
  <el-select clearable filterable v-model="value"
             :filter-method="searchList"
             @blur="blurList"
             v-el-select-loadmore:rangeNumber="loadMore(rangeNumber)"
             @change="changeTab" placeholder="请选择">
    <el-option
      v-for="(item,index) in dataList.slice(0, rangeNumber)"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
</template>
<script>
	import Vue from "vue";
	Vue.directive(
	    'el-select-loadmore', {
	      bind(el, binding) {
	        let self = this
	        // 获取element-ui定义好的scroll盒子
	        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
	        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()
	        });
	      }
	    }
	  )
	  export default {
	  	name: "index",
	  	data(){
	  		return{
		  		value:'',
		  		dataList:[],
		  		filterList:[],
		  		rangeNumber:10,//初始化默认显示10条
	  		}
	  	},
	  	mounted() {
	      this.getDataList()
	    },
	  	methods:{
	  		//自定义筛选
	  		searchList(e){
	  			this.value=e//注意：这里一定要给value赋值
		        if (e) { //val存在
		          this.dataList = this.filterList.filter((item) => {
		            if (!!~item.indexOf(e) || !!~item.toUpperCase().indexOf(e.toUpperCase())) {
		              return true
		            }
		          })
		        } else { //val为空时，还原数组
		          this.dataList = this.filterList;
		        }
	  		},
	  		//当 input 失去焦点时触发
	  		blurList(){
	  			if(this.dataList.length==0){
	  				this.value=''
	  			}else{
	  				if(this.value){
	  					this.getDataList()
	  				}
	  			}
	  		},
	  		loadMore(){
		        return () => this.rangeNumber += 5 //每次滚动到底部可以新增条数  可自定义
		    },
		    //下拉框发生改变时触发
		    changeTab(){
		        let _this=this
		        setTimeout(function(){
		          _this.getDataList()
		          // 时间间隔
		        },500);
		    },
		    //获取下拉框数据
		    getDataList(){
			    getList().then(({data}) => {
			    	if (data && data.code === 0) {
			    		this.dataList=data.data
			    		this.filterList=data.data
			    	}else{
			    		this.dataList=[]
			    		this.filterList=[]
			    		this.$message.error(data.msg)
			    	}
			    })
		    },
	  	}
	  }
</script>