javascript element-ui@1.x版本，如果需要把表第一列作为汇总列，并且表格高度大于屏幕高度，向下滚动式使第一行固定在屏幕顶部

Posted 2021-05-04

/**
 * table 使用的指令，用于固定表头
 * @param {Number} 可接受一个数字类型参数,表示 table 上边框离浏览器窗口多少px开始fix头部,默认 0
 */
const ElementTableCtx = '__ElementTableHeaderCtx';
function setFixed(el, fixed, height) {
  if (fixed) {
    el.style.position = 'relative';
    el.style.top = height + 'px';
    el.style.zIndex = 100;
  } else {
    el.style.position = 'relative';
    el.style.top = '0';
    el.style.zIndex = 'inherit';
  }
}
function setFixedHeaderFixed(el, fixed, height) {
  if (fixed) {
    el.style.top = height + 'px';
    el.style.zIndex = 100;
  } else {
    el.style.top = '0';
    el.style.zIndex = 'inherit';
  }
}
function setFirstRowFixed(el, fixed, height = 0) {
  if (fixed) {
    el.style.top = height + 'px';
    el.style.zIndex = 99;
    el.style.borderBottom = '2px solid #e0e6ed';
  } else {
    el.style.top = '0';
    el.style.zIndex = 'inherit';
    el.style.borderBottom = '1px solid #e0e6ed';
  }
}

export default function install(Vue) {
  Vue.directive('fixed-header', {
    bind(el, binding, vnode) {
      const startFixed = binding.value || 0;
      const headerWrapper = el.querySelector('.el-table__header-wrapper');

      if (typeof startFixed !== 'number') {
        throw TypeError('fixed-header needs number value');
      }

      const onScroll = () => {
        const pos = el.getBoundingClientRect();

        if (pos.top - startFixed < 0) {
          setFixed(headerWrapper, true, Math.abs(pos.top - startFixed));
        } else {
          setFixed(headerWrapper, false);
        }
      };
      window.addEventListener('scroll', onScroll);

      el[ElementTableCtx] = {
        onScroll,
        fixedScroll: null
      };
    },
    inserted(el, binding, vnode) {
    },
    componentUpdated(el, binding, vnode) {
      let {fixedScroll} = el[ElementTableCtx];

      if (fixedScroll) {
        window.removeEventListener('scroll', fixedScroll);
      }

      setTimeout(() => {
        const fixedHeaderWrappers = el.querySelectorAll('.el-table__fixed-header-wrapper');
        const fixedRightHeaderWrappers = el.querySelectorAll('.el-table__fixed-right > .el-table__fixed-header-wrapper'); // eslint-disable-line max-len
        const startFixed = binding.value;

        if (fixedHeaderWrappers.length || fixedRightHeaderWrappers.length) {
          el.querySelector('.el-table__fixed') && (el.querySelector('.el-table__fixed').style.zIndex = 100);
          el.querySelector('.el-table__fixed-right') && (el.querySelector('.el-table__fixed-right').style.zIndex = 101);

          fixedScroll = () => {
            const pos = el.getBoundingClientRect();

            if (binding.modifiers.first) {
              const firstRows = el.querySelectorAll('.el-table__body .sum-row > td');
              Array.prototype.slice.call(firstRows).forEach((firstRow, index) => {
                if (pos.top - startFixed < 0) {
                  setFirstRowFixed(firstRow, true, Math.abs(pos.top - startFixed));

                } else {
                  setFirstRowFixed(firstRow, false);

                }
              });
            }

            Array.prototype.slice.call(fixedHeaderWrappers).forEach((fixedHeaderWrapper) => {
              if (pos.top - startFixed < 0) {
                el[ElementTableCtx].fixedHeaderFixed = true;

                setFixedHeaderFixed(fixedHeaderWrapper, true, Math.abs(pos.top - startFixed));
              } else {

                setFixedHeaderFixed(fixedHeaderWrapper, false);
              }
            });
            Array.prototype.slice.call(fixedRightHeaderWrappers).forEach((fixedRightHeaderWrapper) => {
              if (pos.top - startFixed < 0) {
                el[ElementTableCtx].fixedHeaderFixed = true;

                setFixedHeaderFixed(fixedRightHeaderWrapper, true, Math.abs(pos.top - startFixed));
              } else {

                setFixedHeaderFixed(fixedRightHeaderWrapper, false);
              }
            });
          };

          window.addEventListener('scroll', fixedScroll);
          el[ElementTableCtx].fixedScroll = fixedScroll;
        }
      }, 0);

    },
    unbind(el) {
      const {fixedScroll, onScroll} = el[ElementTableCtx];
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('scroll', fixedScroll);
    }
  });
}