vue-virtual-scroll-list

最新推荐文章于 2024-09-21 19:41:28 发布

farise

最新推荐文章于 2024-09-21 19:41:28 发布

阅读量3.8k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/farise/article/details/112606048

版权

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

安装：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>