• 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组件的远程搜索功能,将下拉选择框的数据进行分页与精确搜索,减少数据量。

      

  • 相关阅读:
    Json基础知识总结
    java连接mysql
    (原)java中对象复制、==、equals
    方便面为什么要是波浪形的 它是怎么做到的?
    软件测试的基本功
    如何在字符串中找到第一个不重复的字符
    无线信道抗衰落技术
    成都市政府公开电话
    学习使用Robot Framework自动化测试框架-web元素定位
    破解受保护的excel中的密码
  • 原文地址:https://www.cnblogs.com/chenyoumei/p/15185453.html
Copyright © 2020-2023  润新知