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組件的遠程搜索功能,將下拉選擇框的數據進行分頁與精確搜索,減少數據量。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM