lp-vue/lib/directives/tableSticky.js

vue2组件库&方法&指令集合

'use strict';

exports.__esModule = true;

var _debounce = require('../utils/debounce');

// 头部吸顶
var stickyThead = function stickyThead(el, binging, vnode) {
  var top = '0px';
  if (!isNaN(Number(binging.value))) {
    top = binging.value + 'px';
  }
  if (typeof binging.value === 'string' && document.querySelector(binging.value)) {
    var rect = document.querySelector(binging.value).getBoundingClientRect();
    top = rect ? rect.top + rect.height + 'px' : '0px';
  }

  el.style.overflow = 'visible';
  var tHeader = el.querySelector('.el-table__header-wrapper');
  tHeader.style.position = 'sticky';
  tHeader.style.top = top;
  tHeader.style.zIndex = 20;

  // 移除is-hidden
  var ths = tHeader.querySelectorAll('th.is-hidden');
  ths.forEach(function (item) {
    item.classList.remove('is-hidden');
  });

  // 找到实例
  var table = vnode.context.$children.find(function (item) {
    return item.$el === el;
  });
  table.doLayout();
  // 找到左边固定列
  var leftFixed = table.fixedColumns;
  if (leftFixed && leftFixed.length) {
    var leftFixedWidth = 0;
    leftFixed.forEach(function (item) {
      var cell = tHeader.querySelector('th.' + item.id);
      if (cell) {
        var itemW = cell.getBoundingClientRect().width;
        cell.style.position = 'sticky';
        cell.style.left = leftFixedWidth + 'px';
        cell.style.top = top;
        cell.style.zIndex = 10;
        leftFixedWidth += itemW;
      }
    });
  }

  // 找到右边固定列
  var rightFixed = table.rightFixedColumns;
  if (rightFixed && rightFixed.length) {
    var rightFixedWidth = 0;
    for (var i = rightFixed.length - 1; i >= 0; i--) {
      var cell = tHeader.querySelector('th.' + rightFixed[i].id);
      if (cell) {
        var itemW = cell.getBoundingClientRect().width;
        cell.style.position = 'sticky';
        cell.style.right = rightFixedWidth + 'px';
        cell.style.top = top;
        cell.style.zIndex = 10;
        rightFixedWidth += itemW;
      }
    }
  }
};

// 简易吸顶
var sticky = function sticky(el, binging, vnode) {
  var top = '0px';
  if (!isNaN(Number(binging.value))) {
    top = binging.value + 'px';
  }
  if (typeof binging.value === 'string' && document.querySelector(binging.value)) {
    var rect = document.querySelector(binging.value).getBoundingClientRect();
    top = rect ? rect.top + rect.height + 'px' : '0px';
  }

  el.style.overflow = 'visible';
  var tHeader = el.querySelector('.el-table__header-wrapper');
  tHeader.style.position = 'sticky';
  tHeader.style.top = top;
  tHeader.style.zIndex = 20;
};

var tableOb = null;
var domOb = null;
exports.default = {
  inserted: function inserted(el, binging, vnode) {
    if (binging.modifiers.fixed) {
      // 监听表格变化
      tableOb = new ResizeObserver((0, _debounce.debounce)(function () {
        stickyThead(el, binging, vnode);
      }, 500));
      tableOb.observe(el);
    } else {
      sticky(el, binging, vnode);
    }
    if (binging.modifiers.dom) {
      // 监听目标dom变化
      if (typeof binging.value === 'string') {
        var isDom = document.querySelector(binging.value);
        if (isDom) {
          domOb = new ResizeObserver((0, _debounce.debounce)(function () {
            stickyThead(el, binging, vnode);
          }, 500));
          domOb.observe(isDom);
        }
      }
    }
  },
  unbind: function unbind(el, binging, vnode) {
    tableOb && tableOb.unobserve(el);
    domOb && domOb.unobserve(el);
  }
};