zoukankan      html  css  js  c++  java
  • iview select数据过多,导致页面卡顿及输入框输入卡顿 完美解决

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

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

      1.使用select组件的on-open-change事件,在select选择框聚焦时对下拉框数据赋值,在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组件的远程搜索功能,将下拉选择框的数据进行分页与精确搜索,减少数据量。

      

  • 相关阅读:
    JSP配置虚拟路径及虚拟主机
    Java中遍历集合的常用方法
    【洛谷P2879】[USACO07JAN]Tallest Cow S
    【洛谷P1080】[NOIP2012 提高组] 国王游戏
    算数基本定理
    【csp202104-3】DHCP服务器
    【csp202104-2】邻域均值
    电话网络
    联通数
    【洛谷P4447】[AHOI2018初中组]分组
  • 原文地址:https://www.cnblogs.com/chenyoumei/p/15185453.html
Copyright © 2011-2022 走看看