×

Element-UI 小应用:如何使用InfiniteScroll 无限滚动组件

作者:Terry2024.01.09来源:Web前端之家浏览:2062评论:0
关键词:Element-UI

分享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>

大家试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/Element-UI20240109.html

网友评论文明上网理性发言 已有0人参与

发表评论: