问题:页面中的inpuit输入框,输入内容很卡顿,要好几秒才出现内容
其实刚开始接触这个问题的时候,是很懵的,明明输入框代码啥的都没有问题,经过一天的目标锁定,终于,查到了是其中一个select下拉框的数据量太大了,缩小了范围之后,又很仔细检查了一下代码,以为是v-for和v-show同时使用出现的问题,此处使用了大量的v-if,v-show,v-for,都不知道怎么改了,后来换了个方向查,最终发现是select下拉框组件数据过多,导致页面及输入框出现明显的卡顿,我这里有两千多个数据。
想到的解决方案: 1.最简单的一种方法,就是使用select下拉框自带的@on-open-change事件,当触发下拉框时事件的时候,就重新赋值数据,下拉框收起的时候,数据清空。这样有一个缺陷,每次点击下拉框的时候都在重新渲染,会有一些等待时间。
<Select
v-model="code"
placeholder="全部" @on-open-change="showAll">
</Select>
showAll(data) {
if (data) {
this.allCode = this.allCodes;
} else {
this.allCode = [];
}
},
2.select下拉框加上分页功能,分页加载,这个改动就大了
3.把下拉框改成输入框模式,直接查询请求接口。