vue-virtual-scroll-list

最新推荐文章于 2026-05-27 12:49:52 发布

原创最新推荐文章于 2026-05-27 12:49:52 发布 · 3.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue应用中使用`vue-virtual-scroll-list`库来实现下拉框的虚拟加载，通过数据分片管理和组件复用提升性能。从安装到代码实现和运行效果，一步步教你搭建并优化数据密集型列表的渲染。

下拉框-使用虚拟加载的方法

安装：npm install vue-virtual-scroll-list --save


<template>
  <div>
    <virtual-list
    style="height: 360px; overflow-y: auto;"
    :data-key="'id'"
    :data-sources="items"
    :data-component="itemComponent"
    >
    </virtual-list>

  </div>
</template>

<script>
import virtuallist from 'vue-virtual-scroll-list'
import Items from "./Items";
export default {
  name: 'HelloWorld',
  components:{
    "virtual-list":virtuallist
  },
  props: {
    msg: String
  },
  data(){
    return{
      itemComponent: Items,
      items:[]
    }
  },
  methods:{
    dataSource(){
      for (let i=0;i<9999;i++){
        this.items.push({
          id:i,
          name:'模拟字段'+i
        });

      }
    },
  },
  created() {
    this.dataSource();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

<template>
<!--    显示数据源-->
    <div>
        {{index}}---{{source.name}}
    </div>
</template>

<script>

export default {
    name: "Items",
    props:{
        index:{
            type:Number

        },
        source:{
            type: Object,
            default(){
                return{
                };
            }

        }
    }
}
</script>

<style scoped>

</style>