vue+element解决数据量太大，列表过多，导致渲染过慢（vue-virtual-scroll-list）

原创于 2021-10-09 15:51:40 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#list #vue.js #javascript #elementui

本文介绍了如何通过npm安装并使用vue-virtual-scroll-list组件，展示了如何在模板中引入和数据驱动展示大量数据，提升性能。

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

1、安装 vue-virtual-scroll-list；

npm install vue-virtual-scroll-list --save

2、引入下载好的组件，记得局部注册一下组件；

<template>
  <div class="table_body">
    <h1>我是标题</h1>
    <div>
      <virtual-list :size="40" :remain="8">
        <div v-for="item of items" :key="item.id">{{ item }}</div>
      </virtual-list>
    </div>
  </div>
</template>
 
<script>
import virtualList from 'vue-virtual-scroll-list'
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    forss() {
      for (let i = 1; i <= 1000000; i++) {
        this.items.push({
          id: i,
          name:
            i +
            '好好学习，天天向上。'
        })
      }
    }
  },
  created() {
    this.forss()
  },
  components: { 'virtual-list': virtualList }
}
</script>