@wocwin/t-ui-plus/lib/packages/components/table/src/useVirtualized.js

Page level components developed based on Element Plus.

'use strict';

var vue = require('vue');

function useVirtualized() {
  const actualHeightContainerEl = vue.ref(null);
  const translateContainerEl = vue.ref(null);
  const scrollContainerEl = vue.ref(null);
  const saveDATA = vue.ref([]);
  const RenderedItemsCache = {};
  const getDom = () => {
    actualHeightContainerEl.value = document.querySelector(
      ".t_table_use_virtual .el-scrollbar__view"
    );
    translateContainerEl.value = document.querySelector(".t_table_use_virtual .el-table__body");
    scrollContainerEl.value = document.querySelector(".t_table_use_virtual .el-scrollbar__wrap");
  };
  const getItemHeightFromCache = (index) => {
    const val = RenderedItemsCache[index];
    return val === void 0 ? 50 : val;
  };
  const updateActualHeight = () => {
    let actualHeight = 0;
    saveDATA.value.forEach((_, i) => {
      actualHeight += getItemHeightFromCache(i);
    });
    actualHeightContainerEl.value.style.height = actualHeight + "px";
  };
  const updateOffset = (offset) => {
    if (translateContainerEl.value && translateContainerEl.value.style) {
      translateContainerEl.value.style.transform = `translateY(${offset}px)`;
    }
  };
  const updateRenderedItemCache = (index) => {
    const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length;
    if (!shouldUpdate) return;
    vue.nextTick(() => {
      const Items = Array.from(
        document.querySelectorAll(".t_table_use_virtual .el-table__row")
      );
      Items.forEach((el) => {
        if (!RenderedItemsCache[index]) {
          RenderedItemsCache[index] = el.offsetHeight;
        }
        index++;
      });
      updateActualHeight();
    });
  };
  return {
    scrollContainerEl,
    updateRenderedItemCache,
    updateOffset,
    getDom,
    getItemHeightFromCache,
    saveDATA
  };
}

exports.useVirtualized = useVirtualized;