【业务实例】vue用虚拟列表办理万条数据勾选卡顿标题

藏宝库编辑 · 2024-9-2 17:15:41

为什么必要虚拟列表

一样平常开发中，经常必要处理惩罚一个大数据量的列表，大概是必要展示、勾选等；
假如我们用html原生的标签实现，性能到还好。但是如今大多都是用第三方组件库开发(比方element-ui)，以便提拔开发服从；
假如我们同时展示、勾选千条数据的时间，页面将会卡主，乃至崩掉；
虚拟列表的方案正是为相识决这类前端大数据量展示、利用卡顿的标题；
虚拟列表原理

虚拟列表只对部门地区举行渲染，对地区外的DOM举行烧毁利用。
假如用户上下滚动，那DOM元素就会不绝创建、烧毁（做好条记，这是考试重点）。

实现多选框组件（万条数据不卡顿）

网上插件很多，不重复造轮子了，本次案例利用的插件 vue-virtual-scroll-list，具体参数设置请检察官网
要实现大数据量的展示和勾选
1.核心点在vue的 mixins 中注册事故 dispatch (这是官网的案例代码)；
2.在组件中利用 $on 订阅虚拟滚动插件 data-component 的勾选事故；
3.在虚拟列表的子组件中，在mounted钩子改变勾选状态，由于随着列表滚动，子组件在不绝被创建、烧毁；’
tips：干系知识，请检察相应链接。本案例未实现默认值、全选等功能，你可以根据现实业务，对组件二次改造。
调用结果及代码

【业务实例】vue用虚拟列表办理万条数据勾选卡顿标题

所属分类: 问答交流

新帖推荐: 30日

推荐作品