项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
import{createVirtualScroller}from'vue-typed-virtual-list';constVirtualScroller=createVirtualScroller<User>();typeUser={id:number;name:string;phone:string;};constsomeArrayOfUsers:User[]=Array.from(Array(100)).map((_,i)=>({id:i+1,name:'Name',phone:'Phone'})); Props defaultSize- Placeholder...
1. Install component npm install vue-virtual-list If you have mixed heights on your rows then you need to specifyh (Number)property on your object with the height. 2. Setup your app <template> <vue-virtual-list> {{item.name}} </vue-virtual-list> </template> import vl from 'vue...
vue-virtual-list-observer From: To: View package on npmDateDownloadsDownloads per dayClick and drag in the plot to zoom inJun '24Jul '24Aug '24Sep '24Oct '24Nov '24Dec '24Jan '25Feb '25Mar '25Apr '25May '250255075100125150
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
yarn add vue-virtual-list-observer Advantages Only 3 required props, simple and very easy to use. intersectionObserver efficient and resolve Fast scrolling in a white screen. Highly customizable and has a live demo to get started quickly
在Vue 中使用useVirtualList时,直接修改列表项的状态并随后从列表中删除该项可能会导致渲染问题,因为虚拟列表依赖于一个静态的数组索引来渲染元素。当你删除一个元素时,后续元素的索引会发生变化,这可能会导致渲染或状态更新上的不一致。 为了解决这个问题,你可以采取以下步骤: ...
vue3-virtual-list 是一个针对 Vue 3 的虚拟列表组件库,旨在解决渲染长列表时可能出现的性能问题。通过只渲染当前视口(viewport)内的元素,并动态地管理这些元素的创建和销毁,vue3-virtual-list 可以显著提高大数据量列表的渲染效率。 vue3-virtual-list 在 Vue 3 中的应用场景 大数据量列表:当需要展示大量数据时...
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” 渲...
npm install vue3-base-virtual-list 参数 export interface Props { // 列表 list: any[] // container 样式 containerStyle?: style // container class containerClassName?: string // child 样式 childStyle?: style // child class childClassName?: string // 高度 height: number // 列表子项预估...