el-image设置lazy之后滚动不会进行加载

问题描述

在el-dialog容器中，使用了table组件，table组件设置了最大高度，然后table里面有一个column使用el-image组件，el-image组件设置了lazy。但是在滚动设置了最大高度的table组件的时候，图片不加载（无网络请求）

问题图片

问题分析和解决

分析了一下，发现应该是滚动容器设置的问题。根据官网的解释：

el-image滚动容器自动选择的准则

这样子的话应该是滚动容器设置有问题。一开始给element的class样式进行覆盖设置为overflow: auto，然后发现无效。好的，猜了一下，这边的自动获取父滚动容器，可能是看父容器style有没有设置overflow: auto或者 overflow: hidden，然后看源码：

element image源码

有一个getScrollContainer函数，然后再看看这个函数的源码（路径：github element utils地址）

getScrollContainer
解读一下就是，如果父容器是顶层容器了，就直接设置成window，然后不是的话，再接着挑，里面有一个isScroll函数，里面有一个getStyle

export const isScroll = (el, vertical) => {
  if (isServer) return;

  const determinedDirection = vertical !== null || vertical !== undefined; // 是否选择了方向
  const overflow = determinedDirection
    ? vertical
      ? getStyle(el, 'overflow-y') // 垂直方向，识别overflow-y属性
      : getStyle(el, 'overflow-x') // 水平，识别 overflow-x属性
    : getStyle(el, 'overflow'); // 都没有，直接overflow

  return overflow.match(/(scroll|auto)/);  // 检测overflow属性值是否是auto或者scroll
};

export const getStyle = ieVersion < 9 ? function(element, styleName) {
  if (isServer) return; // 服务器，返回
  if (!element || !styleName) return null;
  styleName = camelCase(styleName); // 把短横式名换成驼峰式
  if (styleName === 'float') {
    styleName = 'styleFloat';
  }
  try {
// 这边进行style的获取
    switch (styleName) {
      case 'opacity':
        try {
          return element.filters.item('alpha').opacity / 100;
        } catch (e) {
          return 1.0;
        }
      default:
        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null); // element.currentStyle用在IE中。这边可以直接看到是返回元素的style中有的属性。
    }
  } catch (e) {
    return element.style[styleName];
  }
} : function(element, styleName) {
  if (isServer) return;
  if (!element || !styleName) return null;
  styleName = camelCase(styleName);
  if (styleName === 'float') {
    styleName = 'cssFloat';
  }
  try {
    var computed = document.defaultView.getComputedStyle(element, ''); // 同样是ie的polyfill
    return element.style[styleName] || computed ? computed[styleName] : null; // 也是返回style属性中的对应属性值。
  } catch (e) {
    return element.style[styleName];
  }
};

好了，基本可以确定就是获取父元素的Style属性里面有没有overflow: auto或者overflow:scroll来确定滚动容器。
然后发现打开dialog的时候，一连串都没有style属性设置了overflow:auto 或者overflow: hidden的父容器。然后自行给最近的父容器加了overflow：auto属性。

解决方案
问题解决。