解决在el-scrollbar中使用el-image懒加载不生效

在 el-scrollbar 中使用 el-image 懒加载，按照官方文档描述的，在不指定 scroll-container 的情况下，它会自动匹配最近一个 overflow 值为 auto 或 scroll 的父元素，信以为然的就没有管 scroll-container 的配置，结果……我把滚动条滚烂了应该懒加载的图片都没有加载出来！！！！！

以为是一个 bug ？换用 div 标签，设置为可滚动，应该懒加载的图片又是正常加载出来了……网上搜寻资料，木有盆友发表相关资料，好吧自己来吧……

官方文档描述，可以使用 scroll-container 指定监听 scroll 事件的容器，值类型为 string / HTMLElement ，然后就没有了，感觉描述的太简单了，也没有示例代码。HTMLElement 类型倒能理解是什么意思，但是 string 类型没有琢磨出来。那就给指定一个 HTMLElement 吧。

HTMLElement 指的是 DOM 对象，也就是说可以给 scroll-container 指定一个 overflow 值为 auto 或 scroll 的 DOM 对象。我们先分析一下 el-scrollbar （如果你已经了解它的结构，就当我没说这句话），它是由最外层组件层（el-scrollbar）、内容包裹容器（wrap）、水平/垂直滚动条组成，内容溢出需要滚动就发生在内容包裹容器上面，所以我们要给 scroll-container 指定的 HTMLElement 应该就是它了，让我们试试吧。

文档结构

<template>
  <el-scrollbar ref="el_scrollbar" style="height: 100%">
    <el-image
      v-for="(item, index) in photoList"
      :key="index"
      :src="item.imgsrc"
      fit="cover"
      lazy
      :scroll-container="scrollContainer"
    ></el-image>
  </el-scrollbar>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      photoList: [
        { imgsrc: "...", text: "..." }
      ],
      scrollContainer: HTMLElement
    };
  },
  mounted() {
    this.scrollContainer = this.$refs.el_scrollbar.wrap;  // 将 el-scrollbar 的 wrap 对象找出来，指定给 scroll-container 
  }
}

最后实验一下，成功了。但是为什么 scroll-container 没有能自动匹配到 el-scrollbar 的 wrap 呢？我猜应该和 vue 的渲染有关吧，可能是 el-scrollbar 的 wrap 是在渲染过程中生成的，并没有直接体现在代码的字面量上面，所以渲染 el-image 的时候， el-image 不知道 el-scrollbar 有一个 overflow 值为 auto 或 scroll 的 wrap 子元素存在，我还没有专门研究过这渲染的过程，后面有时间再研究一下，看看我猜的对不对 ^_