项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
1. 理解vue-virtual-scroll-list的基本概念和功能 vue-virtual-scroll-list是一个用于Vue.js的虚拟滚动组件,旨在处理大量数据渲染时的性能问题。它通过只渲染视口(viewport)内的数据项,而不是整个列表,从而显著提高页面性能。这对于处理长列表或表格等大量数据的场景特别有用。 2. 安装并引入vue-virtual-scroll-list...
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
1.vue-virtual-scroll-list插件 这个插件就是vue中的一个长列表的插件,官网地址:https://tangbc.github.io/vue-virtual-scroll-list/#/ 来看一下该组件的渲染情况: 可以明显看出,其渲染的时候,DOM节点数量都是固定的,并不会将
import virtualList from 'vue-virtual-scroll-list' components:{ 'virtual-list': virtualList }, 基础用法 属性说明 data-key=“selectData.value” 就是绑定的唯一key值,可传入动态的 data-sources=“selectArr” 下拉框的数组 data-component=“itemComponent” 就是抽离中的el-option组件 keeps=“20” 渲...
npmivue-virtual-scroll-list 1. 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际将 10000 条数据全部渲染出来了,这很容易导致页面卡顿。 通过vue-virtual-scroll-list 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际只渲染了展示数据前后的91-110...
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-...
VirtualScroll.vue文件 <template> <!-- wrapper可视容器需要设置overflow-y:auto;才能监听滚动事件,在父组件使用该组件时,需要设置wrapper可视容器的区域范围 --> <!-- content填充要显示内容以及上下空白占位 --> <!-- 每条数据的内容结构通过插槽的方式让父组件调用该组件时填充进来...
在项目中有一个sku表(是一个尺码和颜色乘积的表格),假如有10个颜色,20个尺码,那这个sku表就会有200行。有一个客户有100个颜色的需求,100个颜色的时候如果有5个尺码,就会有500行,这样会使页面很卡,于是找到了vue-virtual-scroll-list这个插件。
npm install --save vue-virtual-scroll-list@1.1.3 1. 使用 在单页面中导入 import VirtualList from "vue-virtual-scroll-list"; 1. components: { VirtualList,//注册组件 }, 1. 2. 3. <!-- size代表行高 remain代表一次渲染的数量 --> <!-- 出现的问题:1.在时间视图时(文件...