1
import { tableViewData } from './xxx.js'
2

3
const OVER_SCAN = 2;
4
const ITEM_HEIGHT = 32;
5

6
export const containerRef = ref(null); // 外部容器引用
7

8
export const renderViewData = ref([]); // 给外部实际渲染的数据，会根据数据的显示状态获取到正确的数据
9

10
const size = useElementSize(containerRef); // 容器高度
50 collapsed lines
11
export const ranges = ref({ from: 0, to: 0 }); // 数据取值范围
12

13
export const placeholderHeight = computed(() => ({
14
  head: ranges.value.from * ITEM_HEIGHT + "px",
15
}));
16

17
// 将不展示的数据过滤, 防止隐藏的数据参与计算导致页面渲染的元素不正确的问题
18
const source = computed(() =>
19
  tableViewData.value.filter((row) => getConfigOfRowKey(row).display)
20
);
21

22
const getViewCapacity = (containerHeight) => {
23
  return Math.ceil(containerHeight / ITEM_HEIGHT);
24
};
25

26
const getOffset = (scrollTop) => {
27
  return Math.floor(scrollTop / ITEM_HEIGHT) + 1;
28
};
29

30
export const calculateRange = () => {
31
  const element = containerRef.value;
32
  if (!element) {
33
    return;
34
  }
35

36
  const offset = getOffset(element.scrollTop);
37
  const viewCapacity = getViewCapacity(element.clientHeight - 38 - 7); // 表头高度 + 横向滚动条高度
38

39
  const start = offset - OVER_SCAN;
40
  const end = offset + viewCapacity + OVER_SCAN;
41

42
  ranges.value = {
43
    from: start < 0 ? 0 : start,
44
    to: end > source.value.length ? source.value.length : end,
45
  };
46

47
  nextTick(() => {
48
    // 计算需要渲染到页面中的数据
49
    renderViewData.value = source.value.slice(
50
      ranges.value.from,
51
      ranges.value.to
52
    );
53
  });
54
};
55

56
watch(
57
  // 当容器的高度或者数据源变化则重新计算数据区间
58
  [size.height, tableViewData],
59
  debounce(() => calculateRange(), 200)
60
);