项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
npm install vue-virtual-scroll-list --save Root component: <template> <virtual-liststyle="height: 360px; overflow-y: auto;"//makelistscrollable:data-key="'uid'":data-sources="items":data-component="itemComponent"/> </template>importItemfrom'./Item'importVirtualListfrom'vue-virtual-scroll...
npm install vue-virtual-scroll-list --save 这条命令的作用是从npm仓库中下载并安装 vue-virtual-scroll-list 包,并将其添加到你的项目依赖中。--save 参数表示将安装的包添加到 package.json 文件的 dependencies 部分,这样其他开发者或者未来的你可以通过运行 npm install 命令来安装所有依赖。 等待安装完成:...
npm install vue-virtual-scroll-list --saveRoot component:<template> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources="items" :data-component="itemComponent" /> </template> import Item from './Item' import VirtualList...
npm install vue-virtual-scroll-list 页面使用 <template><virtual-liststyle="height: 300px; overflow-y: auto"class="virtual-list":data-key="'id'":data-sources="goodsList":data-component="itemComponent":extra-props="{ itemClick: itemClick, current...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看效果 安装 npm install vue-virtu...
简介: Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题 1. 简介 vue-virtual-scroll-list npm 地址 vue-virtual-scroll-list 主页 安装 npm i vue-virtual-scroll-list 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览...
npm install vue-virtual-scroll-list 1. 页面使用 <template> <virtual-list style="height: 300px; overflow-y: auto" class="virtual-list" :data-key="'id'" :data-sources="goodsList" :data-component="itemComponent" :extra-props="{ itemClick...
npmivue-virtual-scroll-list 1. 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际将 10000 条数据全部渲染出来了,这很容易导致页面卡顿。 通过vue-virtual-scroll-list 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际只渲染了展示数据前后的91-110...
虚拟滚动列表. Latest version: 1.0.1, last published: a year ago. Start using @yinta/yt-virtual-scroll-list-vue3 in your project by running `npm i @yinta/yt-virtual-scroll-list-vue3`. There are no other projects in the npm registry using @yinta/yt-virtual