element ui懒加载

Element UI 懒加载是指在页面滚动到特定位置时，才会加载并呈现某些组件或内容，从而提高页面的加载速度和用户体验。

Element UI 提供了一个懒加载指令 v-lazy，用于实现懒加载功能。下面是一个示例：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div v-lazy="item.imgUrl" class="lazy-img"></div>
      <div>{{ item.description }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, imgUrl: '/static/images/1.jpg', description: '图片1' },
        { id: 2, imgUrl: '/static/images/2.jpg', description: '图片2' },
        { id: 3, imgUrl: '/static/images/3.jpg', description: '图片3' },
        // ...
      ],
    };
  },
};
</script>

<style>
.lazy-img {
  width: 300px;
  height: 200px;
  background-color: #eee;
  background-size: cover;
}
</style>

在上面的示例中，v-for 指令会遍历 items 数组，并根据每个 item 的 imgUrl 属性来渲染图片。在图片的 div 元素上，我们添加了 v-lazy 指令，并将 imgUrl 作为参数传递给它。这样，在页面滚动到图片所在位置时，图片才会被加载并呈现出来。

需要注意的是，为了让 v-lazy 指令生效，我们需要在 main.js 中注册它：

import Vue from 'vue';
import { Lazyload } from 'element-ui';

Vue.use(Lazyload);

这样，我们就可以在 Element UI 中很方便地实现懒加载功能了。