iview的select下拉框组件数据过多,导致页面及输入框出现明显的卡顿,输入的文字几秒才能显示出来

888 阅读1分钟

问题:页面中的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.把下拉框改成输入框模式,直接查询请求接口。