Element输入框iput输入卡顿问题

之前做完新页面测试保存和修改功能的时候，发现输入input和删除其中的内容会卡顿

今天记录一下问题所在

这让我百思不得其解，首先我确认我的页面排版以及代码写法和其他页面无二，确定不是组件以及代码嵌套问题，而后我把目光转向form表单上，既然是输入框卡顿问题应该在form表单处，我先后尝试表单分离，多层表单依旧行不通，后面我看到其他文章提到的

使用.lazy的修饰符可以取消v-model的双向绑定，避免输入改变增加队列造成卡顿

//不成功的使用方法
<el-input v-model.lazy="code" placeholder="code"></el-input>
//成功的使用方法("el-textarea__inner"类可以让样式与框架一致)
<textarea class="el-textarea__inner" v-model.lazy="code" placeholder="code"></textarea>

原文链接：https://blog.csdn.net/m0_37787662/article/details/119991457

随后我尝试了一下确实有效，但是表单的内容太多明显不适合，且也有不少的表单验证，重新写一遍有点得不偿失

而后，我开始对表单中的内容开始删减，当删减到下拉框的时候，卡顿的感觉明显减少，于是我把所有的下拉框全部注释，发现input输入卡顿确实有所缓解，但还是存在卡顿

后面我发现是下拉框中获取集合的内容太多

 获取的数据高达200多条，其他几个的下拉框所获取的数据也均有100多条数据，

然后我把获取数据的方法全部注释，再重新向input框输入字符，卡顿也消失了

至于实际解决办法的话，可以尝试用懒加载吧，监听下拉动作，加载内容，

或者使用element官方文档上的远程搜索解决