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