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>

Logo

前往低代码交流专区

更多推荐