在Vue 3中使用vue-virtual-scroll-list组件,可以显著提高渲染大量数据的性能。以下是详细步骤,包括安装、引入、配置、使用以及测试: 1. 安装vue-virtual-scroll-list库 首先,你需要在你的Vue 3项目中安装vue-virtual-scroll-list库。可以通过npm或yarn进行安装: bash npm install vue-virtual-scroll-list 或者 bas...
对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际将 10000 条数据全部渲染出来了,这很容易导致页面卡顿。 通过vue-virtual-scroll-list 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际只渲染了展示数据前后的91-110内的20条数据(取决于keeps参数)。
解决方法: 遍历所有数据,将对应回显的那一条数据放在第一条即可 1this.selectArr = JSON.parse(JSON.stringify(this.selectData.data));2let obj ={};3for(let i = 0; i <this.selectArr.length; i++) {4const element =this.selectArr[i];5if(element[this.selectData.value].toLowerCase() ===...
1.安装 cnpm/npm install vue-virtual-scroll-list --save 2.引入下载好的组件,并注册组件 import virtualList from 'vue-virtual-scroll-list' 3.注意版本1.x和2.x使用方式不同、api也不同 使用方式: <template> <virtual-list style="height: 360px; overflow-y: auto;" :data-key="'id'" :data-...
vue3-virtual-scroll-list/.editorconfig Version: 229 BPlain TextView Raw 1 # EditorConfig is awesome: https://EditorConfig.org 2 3 # top-most EditorConfig file 4 root = true 5 6 [*] 7 indent_style = space 8 indent_size = 2 9 end_of_line = lf 10 charset = utf-8...
A vue3 component support big amount data list with high scroll performance.. Latest version: 1.0.0, last published: 6 months ago. Start using vue3-virtual-scroll-list-make in your project by running `npm i vue3-virtual-scroll-list-make`. There are no oth
在项目中有一个sku表(是一个尺码和颜色乘积的表格),假如有10个颜色,20个尺码,那这个sku表就会有200行。有一个客户有100个颜色的需求,100个颜色的时候如果有5个尺码,就会有500行,这样会使页面很卡,于是找到了vue-virtual-scroll-list这个插件。
UNPKG vue3-virtual-scroll-list/README.md Version: 265 BMarkdownView Raw 1# vue3-virtual-scroll-list 2 3⚡️A vue3 component support big amount data list with high render performance and efficient. Forked from https://github.com/tangbc/vue-virtual-scroll-list/. ...
手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解到可以通过虚拟列表技术来解决。 虚拟列表做的事情,就是按需渲染。只需要...
当我们有大量数据需要显示在列表中时,传统的滚动列表会将所有数据渲染到 DOM 中,导致性能下降和内存占用增加。虚拟滚动列表通过仅渲染当前视窗内可见的一小部分数据,动态地根据滚动位置更新列表内容,从而实现更高效的列表渲染。 vue-virtual-scroll-list是一个用于 Vue.js 的虚拟滚动列表组件。它提供了一种优化大量数据...