vue项目大量数据渲染页面优化---vue-virtual-scroll-list插件

Ace.三阶斗尊

于 2020-06-25 12:14:05 发布

阅读量7.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue virtual-scroll

本文链接：https://blog.csdn.net/qq_42231156/article/details/106956529

本文介绍了如何使用vue-virtual-scroll-list插件优化Vue项目中的大量数据渲染。当数据列表过长时，通过该插件只渲染可视区域内的少量条目，提高页面性能。步骤包括安装插件并应用于iView的下拉/多选框组件，以减少实际渲染的数据量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0. git库：https://www.npmjs.com/package/vue-virtual-scroll-list

1. 下拉列表数据很多时的优化渲染：引入vue-virtual-scroll-list插件。通过每次只渲染指定条数，比如6条，即使下拉列表中有上千条数据，也能很每次只渲染6条，从而减少渲染，优化页面，其他隐藏的滚动部分就做个虚假的滚动高度，但是不渲染数据。

1.1 下载：npm install --save [email protected]。

1.2 使用：iview的下拉/多选框组件的中大量数据的使用。


<script>
    import VirtualList from 'vue-virtual-scroll-list'
    components:{
        VirtualList 
    }
</script>
<!--:size='30' 表示行高30px :remain='6'表示页面只每次渲染6条-->
<Select>
    <VirtualList :size='30' :remain='6'>
        <Option v-for="(item,index) in list" :key='index'>{
  
  {item.label}}</Option>
    </VirtualList>
&l