iview select数据过多,导致页面卡顿及输入框输入卡顿 完美解决

问题情景:
  iview中的select组件数据多达几千几万条的时候,页面及输入框出现明显的卡顿,一个弹框的显示隐藏要几秒才能反应过来,输入框也是输入的文字几秒才能显示出来。

解决方法:
  原理:
既然是由于select组件数据过多导致页面渲染卡顿,那么解决方法自然是减少select组件数据。

  1.使用select组件的on-open-change事件,在select选择框聚焦时对下拉框数据赋值,在select选择框失焦时,清空下拉框数据。

  iview select数据过多,导致页面卡顿及输入框输入卡顿 完美解决

  代码示例:

showHideSelect(val){
      if(val){
          this.currInfoList = this.infoList;
      }else{
          this.currInfoList  = [];
      }
},

  这样做的好处是,不需要使用远程搜索,简单方便快捷。
  不过有一点要注意,当在selece组件的option上使用click.native绑定事件后,清空下拉框数据这一步要放到click.native绑定的事件里去处理,否则会出现清空下拉框数据后选中的数据变成空白的现象。这是由于option上使用click.native绑定的事件是在select组件的on-open-change事件执行完成之后才执行,所以会出现数据空白的情况。

  2.使用select组件的远程搜索功能,将下拉选择框的数据进行分页与精确搜索,减少数据量。

  iview select数据过多,导致页面卡顿及输入框输入卡顿 完美解决

上一篇:Circular-Menu在VUE中的使用步骤


下一篇:2021-10-07