南通网站建设教程,万网商标注册,美术字设计,微信网站开发 js框架select 组件在几千上万条数据的时候特别卡#xff0c;调试发现option组件渲染太多#xff0c;导致整个页面都卡#xff0c;通过调研发现可以通过虚拟加载的方式动态渲染option#xff0c;亲测上万数据一点都不卡#xff0c;废话不说#xff0c;上代码
虚拟加载用的是 vu… select 组件在几千上万条数据的时候特别卡调试发现option组件渲染太多导致整个页面都卡通过调研发现可以通过虚拟加载的方式动态渲染option亲测上万数据一点都不卡废话不说上代码
虚拟加载用的是 vue-virtual-scroller 具体怎么安装和使用这就不介绍网上一大把下面是select结合 vue-virtual-scroller 的代码由于option上包了一成代码会导致select选中的样式不会自动加上需要手动在option上加上选中样式 Select v-modelnodeData.fileUniqueList multiple filterable filter-by-labelrefselecton-query-changefileQueryChangestylewidth:100%recycle-scrollerclassvirtual-list:buffer200:prerender10styleheight: 180px:item-size30key-fieldvalue:itemsfileListtemplate v-slot{ item, index }Option:class{ivu-select-item selected:nodeData.fileUniqueList.includes(item.value)}:valueitem.value :keyitem.value :labelitem.fileName{{ item.fileName }}/Option/template/recycle-scroller/Select
在 mounted 中把select的自动过滤方法重写这一步很关键没这一步会导致搜索的option被强制重写这样永远都渲染不出来数据 this.$nextTick(() {// 替换过滤函数this.$refs.select.validateOption () true;});
然后就是自定义查询方法通过 on-query-change事件自己写过滤方法我这是先把查出来的数据备份了一份然后在备份的数据里面查找在深度拷贝给对象
fileQueryChange(v) {if (v) {let data deepClone(this.fileListBak.filter(f f.fileName.indexOf(v) 0))this.fileList data} else {this.fileList deepClone(this.fileListBak)}},
最后就是返现问题由于动态渲染不会把所有的option都渲染出来导致不能返现调试了下发现多选的时候select组件是在values里面plus值所以在数据返回后循环以前选中的然后查找最后给values赋值这是多选的方式单选应该也是大同小异如果不行去调试一下看单选是怎么赋值的 this.$refs.select.values []this.nodeData.fileUniqueList.forEach(f {let data this.fileList.find(d d.value f)this.$refs.select.values.push({label: data.fileName,tag: undefined,value: f})})
