最近遇到一个下拉框选项过多导致页面太卡甚至卡死的问题，搜了一下懒加载以及远程搜索方法，整理了一下： 1、el-select懒加载 el-select选择器里的数据通过后端返回得到，这里返回了将近两万条数据，点开选择器页面就特别卡，所以最好采用懒加载方法，具体使用如下： 控件部分： 数据 ...

一、需求：下拉框支持远程搜索，根据用户输入字符，调接口获取数据渲染到下拉列表上，供用户选择。 二、为什么要做 防抖控制？在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁地掉接口请求数据，假设我们的查询是"12345"，不考虑用户输入错误的情况，至少会请求5次。很明显这样频繁地查询数据库 ...

1：要求 是一个下拉框，输入关键字时，从接口中读取关键字匹配，不输入时，下拉框不出现。 效果图如下： 若后端将全部数据都返回给前端了，前端又使用的是element框架，那么只需要在下拉框组件中加上 filterable 属性即可，其他功能可查看属性需要自行添加 ...

1. Vue的form表单实现下拉搜索框 2. 代码 在<el-select> 中，加上 filterable 即可（v-model.trim：是过滤输入的空格），clearable：输入框带清空输入内容的功能 ...

先上效果图： 组件特点： 模拟下拉框 可输入文字搜索选项，keyup或input事件触发搜索（并优化了原生keyup和input事件的问题） 数据源异步加载 滚动加载选项数据 同一页面可重复使用该组件 技术工具说明： 基础框架 ...

原理：类似分页，设置高度，当超过一个高度再加载一页数据 在赋值的时候，可能当前的select值没有目标值，所以赋值时需要处理一下 ...

在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿（如在我在一次迭代中有一个select项接口返回了5000多条数据）。用户体验差！结合实际开发给出了3个解决方案： 　　方案1、select的无限加载； 　　方案2、select的分段加载； 　　方案3、select的模糊 ...

给select下拉框添加属性 dropdownRender={menu => ( <div> ...