web 下拉列表选项过多时解决方案

下拉列表选项过多时如何解决

<el-select v-model="form.selectChannel" reserve-keyword multiple clearable filterable :filter-method="filterChannel" @focus="selectFocus" placeholder="请选择">
	<el-option v-for="item in ChannelCfgOption" :key="item.Channel" :label="item.Channel+':'+item.Name" :value="item.Channel">
	</el-option>
</el-select>

selectFocus(e){
    let value = e.target.value
    console.log("selectFocus:", value)
    this.filterChannel(value)
},
filterChannel(query) {
  if (query == '')
	this.ChannelCfgOption = this.tableChannelCfg.slice(0, this.multipleSelectMax)
  else {
	let result = []
	for (var val of this.tableChannelCfg) {
	  if (val.Channel.indexOf(query) != -1) result.push(val)
	  if (result.length >= this.multipleSelectMax) break
	}
	this.ChannelCfgOption = result
  }
}

注意：需要处理获取焦点事件，刷新下拉选项

refer：https://www.cnblogs.com/shemingxin/p/12514390.html