iview select组件在大数据情况下虚拟加载处理方式

select 组件在几千上万条数据的时候特别卡,调试发现option组件渲染太多,导致整个页面都卡,通过调研发现可以通过虚拟加载的方式动态渲染option,亲测上万数据一点都不卡,废话不说,上代码

虚拟加载用的是 vue-virtual-scroller 具体怎么安装和使用,这就不介绍,网上一大把,下面是select结合 vue-virtual-scroller 的代码,由于option上包了一成代码,会导致select选中的样式不会自动加上,需要手动在option上加上选中样式

html 复制代码
 <Select v-model="nodeData.fileUniqueList" multiple filterable filter-by-label
          ref="select"
          @on-query-change="fileQueryChange"
          style="width:100%">
          <recycle-scroller
            class="virtual-list"
            :buffer="200"
            :prerender="10"
            style="height: 180px"
            :item-size="30"
            key-field="value"
            :items="fileList">
            <template v-slot="{ item, index }">
              <Option
                :class="{'ivu-select-item selected':nodeData.fileUniqueList.includes(item.value)}"
                :value="item.value" :key="item.value" :label="item.fileName">{{ item.fileName }}
              </Option>
            </template>
          </recycle-scroller>
        </Select>

在 mounted 中把select的自动过滤方法重写,这一步很关键,没这一步会导致搜索的option被强制重写,这样永远都渲染不出来数据

javascript 复制代码
 this.$nextTick(() => {
      // 替换过滤函数
      this.$refs.select.validateOption = () => true;
    });

然后就是自定义查询方法,通过 on-query-change事件自己写过滤方法,我这是先把查出来的数据备份了一份,然后在备份的数据里面查找在深度拷贝给对象

javascript 复制代码
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赋值,这是多选的方式,单选应该也是大同小异,如果不行,去调试一下看单选是怎么赋值的

javascript 复制代码
    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
         })
     })
相关推荐
java水泥工8 小时前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
爱看书的小沐2 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc4 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手4 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
叫兽~~4 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安6 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人6 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin7 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型