@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
59 lines (56 loc) • 1.84 kB
JavaScript
import { ref, nextTick } from 'vue';
function useVirtualized() {
const actualHeightContainerEl = ref(null);
const translateContainerEl = ref(null);
const scrollContainerEl = ref(null);
const saveDATA = 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;
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
};
}
export { useVirtualized };