脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Element-UI的 InfiniteScroll 无限滚动组件

Element-UI的 InfiniteScroll 无限滚动组件基本使用及应用场景

 更新时间：2023年06月29日 08:31:11   作者：远方除了遥远一无所有  
这篇文章主要介绍了Element-UI的InfiniteScroll无限滚动组件基本使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

应用场景

有的时候我们表格不想要使用分页的功能，想滑动到底部加载更多的数据；有时后端返回的数据很多要前端在一页展示，但是使用了element-ui的table组件后会发生页面卡顿的情况（因为element-ui的table组件将所有的dom元素都渲染在页面上了）

代码

<template>
  <div class="app">
    <ul
      class="infinite-list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="50"
      style="overflow: auto"
    >
      <li v-for="(i, index) in count" :key="index" class="infinite-list-item">
        {{ i }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
  methods: {
    // 加载更多时追加数据
    loadMore() {
      console.log("load");
      this.count += 2;
    },
  },
  computed: {
    // 控制是否能加载更多
    disabled() {
      return this.count >= 30;
    },
  },
};
</script>
<style scoped>
.infinite-list {
  height: 200px;
  background-color: skyblue;
}
</style>

到此这篇关于Element-UI的 InfiniteScroll 无限滚动组件基本使用的文章就介绍到这了,更多相关Element-UI的 InfiniteScroll 无限滚动组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论