封装一个elment-plus 的局部加载效果

在Element Plus中，局部加载（也称为懒加载或者按需加载）通常用于优化用户体验，特别是当页面内容较多时，可以避免一次性加载所有数据，提高页面的初始加载速度。你可以通过以下几个步骤封装这种效果：

1. 引入Vue的`v-if`或`v-show`指令：这两个指令可以根据条件控制元素的显示。比如，当你有一个大列表，你可以只在用户滚动到某个位置时才开始加载那一部分的内容。

<template>
  <div ref="list">
    <ul v-for="(item, index) in lazyList" :key="index" v-if="showItem(index)">
      <!-- item 元素的模板 -->
      <li>{{ item.title }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lazyList: [],
      showItem: (index) => index < this.loadedItems,
      loadedItems: 0,
    };
  },
  methods: {
    loadMore() {
      // 加载更多的数据并更新`lazyList`
      this.$axios.get('/api/load-more')
        .then(response => {
          this.lazyList = [...this.lazyList, ...response.data];
          this.loadedItems += response.data.length;
        });
    },
  },
};
</script>

在这个例子中，`loadMore`函数会在用户点击“加载更多”按钮时发出请求，并将新数据追加到`lazyList`。`showItem`函数决定了是否显示当前索引处的数据。