ElementUi框架解决el-select选择器(下载框)同时加载很多数据时卡顿问题

导读：

本文分享的方法是比较笨的，会牺牲掉很多的数据，比如说原本有1000条数据，但用了本文方法后，下拉框最多只能显示您所设置的50条数据。如果你想滚动显示全部的数据，请参考我的另一篇文章 https://www.37boke.com/archives/187.html

html部分代码：

<div class="layui-form-item" style="display:flex;">
	<label class="col-md-2" style="text-align:right;">选择物品</label>
	<div class="col-md-7">
            <el-select
		   v-model="itemid"
		   filterable
		   :filter-method="itemFilter"
		   clearable placeholder="请选择">
	        <el-option
			   v-for="item in itemList"
			   :key="item.id"
			   :label="item.name"
			   :value="item.id"></el-option>
            </el-select>
	</div>
</div>

js部分代码：

<script type="text/javascript">
var demo = new Vue({
	el: '#demo',
	data: function() {
		return {
			allItemList: [],
			itemList: [], 
			itemid: 0,
		}
	},
	/*初始化*/
	created: function() {
		//添加到数组里（说明：$itemList是PHP后台的数组集合）
		this.allItemList = this.allItemList.concat({:json_encode($itemList)});
		this.itemFilter();
		//默认显示第一个
		this.itemid = this.itemList[0].id;
	},
	methods: {
		search(){
			var that = this;	
			$.post("后端控制器搜索地址",{"name":that.name}, function (res) {
				if(res.code==1){
					//添加到数组里
					that.allItemList = res.data;
					//过滤
					that.itemFilter();
					//默认显示第一个
					that.itemid = that.itemList[0].id;			
				}else{
					toastr.error(res.msg);
				}
			});
		},
		itemFilter(query = '') {
		  let arr = this.allItemList.filter((item) => {
			return item.name.includes(query) || item.id.includes(query)
		  })
		  //如果数据总条数超过50
		  if (arr.length > 50) {
		        //截取前50条数据，我们只让下拉框最多显示50条内容
			this.itemList = arr.slice(0, 50)
		  } else {
			this.itemList = arr
		  }
		},
	}
});
</script>