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