stk-table-vue 0.0.1-beta.1

package/src/StkTable/const.ts

@@ -0,0 +1,26 @@
+export const Default_Col_Width = '100';
+
+export const Default_Table_Height = 100;
+export const Default_Table_Width = 200;
+
+/** 高亮背景色 */
+export const Highlight_Color = {
+  light: { from: '#71a2fd', to: '#fff' },
+  dark: { from: '#1e4c99', to: '#181c21' },
+};
+/** 高亮持续时间 */
+export const Highlight_Duration = 2000;
+/** 高亮变更频率 */
+export const Highlight_Color_Change_Freq = 100;
+
+let _chromeVersion = 0;
+try {
+  const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
+  if (userAgent) {
+    _chromeVersion = +userAgent[0].split('/')[1];
+  }
+} catch (e) {
+  console.error('Cannot get Chrome version', e);
+}
+/** 是否兼容低版本模式 */
+export const Is_Legacy_Mode = _chromeVersion < 56;

package/src/StkTable/index.ts

@@ -0,0 +1,2 @@
+export { default as StkTable } from './StkTable.vue';
+export { tableSort, insertToOrderedArray } from './utils';

package/src/StkTable/types/index.ts

@@ -0,0 +1,109 @@
+import { Component, VNode } from 'vue';
+
+type Sorter = boolean | Function;
+
+export type StkTableColumn<T extends Record<string, any>> = {
+  dataIndex: keyof T & string;
+  title?: string;
+  align?: 'right' | 'left' | 'center';
+  headerAlign?: 'right' | 'left' | 'center';
+  sorter?: Sorter;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  headerClassName?: string;
+  className?: string;
+  sortField?: keyof T;
+  sortType?: 'number' | 'string';
+  fixed?: 'left' | 'right' | null;
+
+  /** private */ rowSpan?: number;
+  /** private */ colSpan?: number;
+  customCell?: Component | VNode;
+  customHeaderCell?: Component | VNode;
+  children?: StkTableColumn<T>[];
+};
+
+export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
+
+export type SortState = {
+  dataIndex: string;
+  order: null | 'asc' | 'desc';
+  sortType?: 'number' | 'string';
+};
+
+export type UniqKey = string | ((param: any) => string);
+
+export type StkProps = Partial<{
+  width: string;
+
+  /** 最小表格宽度 */
+  minWidth: string;
+
+  /** 表格最大宽度*/
+  maxWidth: string;
+
+  /** 是否隐藏表头 */
+  headless: boolean;
+
+  /** 主题，亮、暗 */
+  theme: 'light' | 'dark';
+
+  /** 虚拟滚动 */
+  virtual: boolean;
+
+  /** x轴虚拟滚动 */
+  virtualX: boolean;
+
+  /** 表格列配置 */
+  columns: StkTableColumn<any>[];
+
+  /** 表格数据源 */
+  dataSource: any[];
+
+  /** 行唯一键 */
+  rowKey: UniqKey;
+
+  /** 列唯一键 */
+  colKey: UniqKey;
+
+  /** 空值展示文字 */
+  emptyCellText: string;
+
+  /** 暂无数据兜底高度是否撑满 */
+  noDataFull: boolean;
+
+  /** 是否展示暂无数据 */
+  showNoData: boolean;
+
+  /** 是否服务端排序，true则不排序数据 */
+  sortRemote: boolean;
+
+  /** 表头是否溢出展示... */
+  showHeaderOverflow: boolean;
+
+  /** 表体溢出是否展示... */
+  showOverflow: boolean;
+
+  /** 是否增加行hover class */
+  showTrHoverClass: boolean;
+
+  /** 表头是否可拖动 */
+  headerDrag: boolean;
+
+  /**
+   * 给行附加className<br>
+   * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
+   */
+  rowClassName: (row: any, i: number) => string;
+
+  /**
+   * 列宽是否可拖动<br>
+   * **不要设置**列minWidth，**必须**设置width<br>
+   * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+   */
+  colResizable: boolean;
+
+  /** 可拖动至最小的列宽 */
+  colMinWidth: number;
+}>;

package/src/StkTable/useColResize.ts

@@ -0,0 +1,172 @@
+import { Ref, onBeforeUnmount, onMounted, ref } from 'vue';
+import { Default_Col_Width } from './const';
+import { StkTableColumn } from './types';
+
+type ColResizeState = {
+  /** 当前被拖动的列*/
+  currentCol: StkTableColumn<any> | null;
+  /** 当前被拖动列的下标 */
+  currentColIndex: number;
+  /** 最后一个叶子列 */
+  lastCol: StkTableColumn<any> | null;
+  /** 鼠标按下开始位置 */
+  startX: number;
+  /** 鼠标按下时鼠标对于表格的偏移量 */
+  startOffsetTableX: 0;
+};
+
+type Params = {
+  props: any;
+  emit: any;
+  tableContainer: Ref<HTMLElement | undefined>;
+  tableHeaderLast: Ref<StkTableColumn<any>[]>;
+  colResizeIndicator: Ref<HTMLElement | undefined>;
+  colKeyGen: (p: any) => string;
+};
+
+/** 列宽拖动 */
+export function useColResize({ tableContainer, tableHeaderLast, colResizeIndicator, props, emit, colKeyGen }: Params) {
+  /** 列宽是否在拖动 */
+  const isColResizing = ref(false);
+
+  /** 列宽调整状态 */
+  let colResizeState: ColResizeState = {
+    currentCol: null,
+    currentColIndex: 0,
+    lastCol: null,
+    startX: 0,
+    startOffsetTableX: 0,
+  };
+
+  onMounted(() => {
+    initColResizeEvent();
+  });
+
+  onBeforeUnmount(() => {
+    clearColResizeEvent();
+  });
+  /** 初始化列宽拖动事件 */
+  function initColResizeEvent() {
+    window.addEventListener('mousemove', onThResizeMouseMove);
+    window.addEventListener('mouseup', onThResizeMouseUp);
+  }
+
+  /** 清除列宽拖动事件 */
+  function clearColResizeEvent() {
+    window.removeEventListener('mousemove', onThResizeMouseMove);
+    window.removeEventListener('mouseup', onThResizeMouseUp);
+  }
+
+  /**
+   * 拖动开始
+   * @param e
+   * @param col 当前列配置
+   * @param isPrev 是否要上一列
+   */
+  function onThResizeMouseDown(e: MouseEvent, col: StkTableColumn<any>, isPrev = false) {
+    if (!tableContainer.value) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const { clientX } = e;
+    const { scrollLeft } = tableContainer.value;
+    const { left } = tableContainer.value.getBoundingClientRect();
+    /** 列下标 */
+    let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen(it) === colKeyGen(col));
+    if (isPrev) {
+      // 上一列
+      colIndex -= 1;
+      col = tableHeaderLast.value[colIndex];
+    }
+    const offsetTableX = clientX - left + scrollLeft;
+
+    // 记录拖动状态
+    isColResizing.value = true;
+    Object.assign(colResizeState, {
+      currentCol: col,
+      currentColIndex: colIndex,
+      lastCol: findLastChildCol(col),
+      startX: clientX,
+      startOffsetTableX: offsetTableX,
+    });
+
+    // 展示指示线，更新其位置
+    if (colResizeIndicator.value) {
+      colResizeIndicator.value.style.display = 'block';
+      colResizeIndicator.value.style.left = offsetTableX + 'px';
+      colResizeIndicator.value.style.top = tableContainer.value.scrollTop + 'px';
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function onThResizeMouseMove(e: MouseEvent) {
+    if (!isColResizing.value) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const { lastCol, startX, startOffsetTableX } = colResizeState;
+    const { clientX } = e;
+    let moveX = clientX - startX;
+    const currentColWidth = parseInt(lastCol?.width || Default_Col_Width);
+    // 移动量不小于最小列宽
+    if (currentColWidth + moveX < props.colMinWidth) {
+      moveX = -currentColWidth;
+    }
+
+    const offsetTableX = startOffsetTableX + moveX;
+    if (!colResizeIndicator.value) return;
+    colResizeIndicator.value.style.left = offsetTableX + 'px';
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function onThResizeMouseUp(e: MouseEvent) {
+    if (!isColResizing.value) return;
+    const { startX, lastCol } = colResizeState;
+    const { clientX } = e;
+    const moveX = clientX - startX;
+
+    // 移动量不小于最小列宽
+    let width = parseInt(lastCol?.width || Default_Col_Width) + moveX;
+    if (width < props.colMinWidth) width = props.colMinWidth;
+
+    const curCol = tableHeaderLast.value.find(it => colKeyGen(it) === colKeyGen(lastCol));
+    if (!curCol) return;
+    curCol.width = width + 'px';
+
+    emit('update:columns', [...props.columns]);
+
+    // 隐藏指示线
+    if (colResizeIndicator.value) {
+      colResizeIndicator.value.style.display = 'none';
+      colResizeIndicator.value.style.left = '0';
+      colResizeIndicator.value.style.top = '0';
+    }
+    // 清除拖动状态
+    isColResizing.value = false;
+    colResizeState = {
+      currentCol: null,
+      currentColIndex: 0,
+      lastCol: null,
+      startX: 0,
+      startOffsetTableX: 0,
+    };
+  }
+
+  /**获取最后一个叶子 */
+  function findLastChildCol(column: StkTableColumn<any> | null) {
+    if (column?.children?.length) {
+      const lastChild = column.children.at(-1) as StkTableColumn<any>;
+      return findLastChildCol(lastChild);
+    }
+    return column;
+  }
+
+  return {
+    isColResizing,
+    onThResizeMouseDown,
+    onThResizeMouseMove,
+    onThResizeMouseUp,
+  };
+}

package/src/StkTable/useHighlight.ts

@@ -0,0 +1,150 @@
+import { interpolateRgb } from 'd3-interpolate';
+import { Ref, computed } from 'vue';
+import { Highlight_Color, Highlight_Color_Change_Freq, Highlight_Duration } from './const';
+
+type Params = {
+  props: { theme: 'light' | 'dark'; virtual: boolean; dataSource: any[] };
+  tableContainer: Ref<HTMLElement | undefined>;
+  rowKeyGen: (p: any) => string;
+};
+/**
+ * 高亮单元格，行
+ * row中新增_bgc_progress_ms 属性控制高亮状态,_bgc控制颜色
+ */
+export function useHighlight({ props, tableContainer, rowKeyGen }: Params) {
+  const highlightInter = computed(() => {
+    return interpolateRgb(Highlight_Color[props.theme].from, Highlight_Color[props.theme].to);
+  });
+  /** 存放高亮行的对象*/
+  const highlightDimRows = new Set<any>();
+  /** 高亮后渐暗的行定时器 */
+  const highlightDimRowsTimeout = new Map();
+  /** 高亮后渐暗的单元格定时器 */
+  const highlightDimCellsTimeout = new Map();
+  /** 是否正在计算高亮行的循环*/
+  let calcHighlightDimLoop = false;
+
+  /**
+   * 计算高亮渐暗颜色的循环
+   * FIXME: 相同数据源，相同引用的情况，将颜色值挂在数据源对象上，在多个表格使用相同数据源时会出问题。
+   */
+  function calcHighlightLoop() {
+    if (calcHighlightDimLoop) return;
+    calcHighlightDimLoop = true;
+    // js计算gradient
+    // raf 太频繁。TODO: 考虑setTimeout分段设置颜色，过渡靠css transition 补间
+    const recursion = () => {
+      window.setTimeout(() => {
+        const nowTs = Date.now();
+        const needDeleteRows: any = [];
+
+        highlightDimRows.forEach(row => {
+          //   const rowKeyValue = rowKeyGen(row);
+          //   const rowEl = tableContainer.value?.querySelector<HTMLElement>(`[data-row-key="${rowKeyValue}"]`);
+          //   if (rowEl && row._bgc_progress === 0) {
+          //     // 开始css transition 补间
+          //     rowEl.classList.remove('highlight-row-transition');
+          //     void rowEl.offsetHeight; // reflow
+          //     rowEl.classList.add('highlight-row-transition');
+          //   }
+          /** 经过的时间 ÷ 高亮持续时间 计算出 颜色过渡进度 (0-1) */
+          const progress = (nowTs - row._bgc_progress_ms) / Highlight_Duration;
+          //   row._bgc_progress = progress;
+          if (0 < progress && progress < 1) {
+            row._bgc = highlightInter.value(progress);
+          } else {
+            row._bgc = ''; // 清空颜色
+            needDeleteRows.push(row);
+          }
+        });
+        needDeleteRows.forEach((row: any) => highlightDimRows.delete(row));
+
+        if (highlightDimRows.size > 0) {
+          // 还有高亮的行,则下一次循环
+          recursion();
+        } else {
+          // 没有则停止循环
+          calcHighlightDimLoop = false;
+        }
+      }, Highlight_Color_Change_Freq);
+    };
+    recursion();
+  }
+
+  /** 高亮一个单元格 */
+  function setHighlightDimCell(rowKeyValue: string, dataIndex: string) {
+    // TODO: 支持动态计算高亮颜色。不易实现。需记录每一个单元格的颜色情况。
+    const cellEl = tableContainer.value?.querySelector<HTMLElement>(
+      `[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`,
+    );
+    if (!cellEl) return;
+    if (cellEl.classList.contains('highlight-cell')) {
+      cellEl.classList.remove('highlight-cell');
+      void cellEl.offsetHeight; // 通知浏览器重绘
+    }
+    cellEl.classList.add('highlight-cell');
+    window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
+    highlightDimCellsTimeout.set(
+      rowKeyValue,
+      window.setTimeout(() => {
+        cellEl.classList.remove('highlight-cell');
+        highlightDimCellsTimeout.delete(rowKeyValue);
+      }, Highlight_Duration),
+    );
+  }
+
+  /**
+   * 高亮一行
+   * @param rowKeyValues
+   */
+  function setHighlightDimRow(rowKeyValues: Array<string | number>) {
+    if (!Array.isArray(rowKeyValues)) rowKeyValues = [rowKeyValues];
+    if (props.virtual) {
+      // --------虚拟滚动用js计算颜色渐变的高亮方案
+      const nowTs = Date.now(); // 重置渐变进度
+      for (let i = 0; i < rowKeyValues.length; i++) {
+        const rowKeyValue = rowKeyValues[i];
+        const row = props.dataSource.find((it: any) => rowKeyGen(it) === rowKeyValue);
+        if (!row) continue;
+        row._bgc_progress_ms = nowTs;
+        // row._bgc_progress = 0;
+        highlightDimRows.add(row);
+      }
+      calcHighlightLoop();
+    } else {
+      // -------- 普通滚动用css @keyframes动画，实现高亮
+      /**是否需要重绘 */
+      let needRepaint = false;
+
+      const rowElTemp: HTMLTableRowElement[] = [];
+      for (let i = 0; i < rowKeyValues.length; i++) {
+        const rowKeyValue = rowKeyValues[i];
+        const rowEl = tableContainer.value?.querySelector<HTMLTableRowElement>(`[data-row-key="${rowKeyValue}"]`);
+        if (!rowEl) continue;
+        if (rowEl.classList.contains('highlight-row')) {
+          rowEl.classList.remove('highlight-row');
+          needRepaint = true;
+        }
+        rowElTemp.push(rowEl);
+        // 动画结束移除class
+        window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
+        highlightDimRowsTimeout.set(
+          rowKeyValue,
+          window.setTimeout(() => {
+            rowEl.classList.remove('highlight-row');
+            highlightDimRowsTimeout.delete(rowKeyValue); // 回收内存
+          }, Highlight_Duration),
+        );
+      }
+      if (needRepaint) {
+        void tableContainer.value?.offsetWidth; //强制浏览器重绘
+      }
+      rowElTemp.forEach(el => el.classList.add('highlight-row')); // 统一添加动画
+    }
+  }
+
+  return {
+    setHighlightDimRow,
+    setHighlightDimCell,
+  };
+}

package/src/StkTable/useThDrag.ts

@@ -0,0 +1,43 @@
+type Params = {
+  emit: any;
+};
+/**
+ * 列顺序拖动
+ * @param param0
+ * @returns
+ */
+export function useThDrag({ emit }: Params) {
+  let dragStartKey: string | undefined = void 0;
+
+  /** 开始拖动记录th位置 */
+  function onThDragStart(e: MouseEvent) {
+    // const i = Array.prototype.indexOf.call(e.target.parentNode.children, e.target); // 得到是第几个子元素
+    dragStartKey = (e.target as HTMLElement).dataset.colKey;
+    emit('th-drag-start', dragStartKey);
+  }
+
+  function onThDragOver(e: MouseEvent) {
+    e.preventDefault();
+  }
+
+  /** th拖动释放时 */
+  function onThDrop(e: MouseEvent) {
+    let th = e.target as HTMLElement;
+    // 找到th元素
+    while (th) {
+      if (th.tagName === 'TH') break;
+      th = th.parentNode as HTMLElement;
+    }
+    // const i = Array.prototype.indexOf.call(th.parentNode.children, th); // 得到是第几个子元素
+    if (dragStartKey !== th.dataset.colKey) {
+      emit('col-order-change', dragStartKey, th.dataset.colKey);
+    }
+    emit('th-drop', th.dataset.colKey);
+  }
+
+  return {
+    onThDragStart,
+    onThDragOver,
+    onThDrop,
+  };
+}

package/src/StkTable/useVirtualScroll.ts

@@ -0,0 +1,186 @@
+import { Ref, ShallowRef, computed, ref } from 'vue';
+import { StkTableColumn } from './types';
+import { Default_Col_Width, Default_Table_Height, Default_Table_Width } from './const';
+
+type Option = {
+  tableContainer: Ref<HTMLElement | undefined>;
+  props: any;
+  dataSourceCopy: ShallowRef<any[]>;
+  tableHeaderLast: Ref<StkTableColumn<any>[]>;
+};
+
+export function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option) {
+  const virtualScroll = ref({
+    containerHeight: 0,
+    startIndex: 0, // 数组开始位置
+    rowHeight: 28,
+    offsetTop: 0, // 表格定位上边距
+    scrollTop: 0, // 纵向滚动条位置，用于判断是横向滚动还是纵向
+  });
+
+  const virtualScrollX = ref({
+    containerWidth: 0,
+    startIndex: 0,
+    endIndex: 0,
+    offsetLeft: 0,
+    scrollLeft: 0, // 横向滚动位置，用于判断是横向滚动还是纵向
+  });
+
+  const virtual_on = computed(() => {
+    return props.virtual && dataSourceCopy.value.length > virtual_pageSize.value * 2;
+  });
+
+  const virtual_pageSize = computed(() => {
+    // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
+    return Math.ceil(virtualScroll.value.containerHeight / virtualScroll.value.rowHeight) + 1;
+  });
+
+  const virtual_dataSourcePart = computed(() => {
+    if (!virtual_on.value) return dataSourceCopy.value;
+    return dataSourceCopy.value.slice(
+      virtualScroll.value.startIndex,
+      virtualScroll.value.startIndex + virtual_pageSize.value,
+    );
+  });
+
+  const virtual_offsetBottom = computed(() => {
+    if (!virtual_on.value) return 0;
+    return (
+      (dataSourceCopy.value.length - virtualScroll.value.startIndex - virtual_dataSourcePart.value.length) *
+      virtualScroll.value.rowHeight
+    );
+  });
+
+  const virtualX_on = computed(() => {
+    return (
+      props.virtualX &&
+      tableHeaderLast.value.reduce((sum, col) => (sum += parseInt(col.minWidth || col.width || Default_Col_Width)), 0) >
+        virtualScrollX.value.containerWidth * 1.5
+    );
+  });
+
+  const virtualX_columnPart = computed(() => {
+    if (virtualX_on.value) {
+      // 虚拟横向滚动，固定列要一直保持存在
+      const leftCols = [];
+      const rightCols = [];
+      // 左侧固定列，如果在左边不可见区。则需要拿出来放在前面
+      for (let i = 0; i < virtualScrollX.value.startIndex; i++) {
+        const col = tableHeaderLast.value[i];
+        if (col.fixed === 'left') leftCols.push(col);
+      }
+      // 右侧固定列，如果在右边不可见区。则需要拿出来放在后面
+      for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
+        const col = tableHeaderLast.value[i];
+        if (col.fixed === 'right') rightCols.push(col);
+      }
+
+      const mainColumns = tableHeaderLast.value.slice(virtualScrollX.value.startIndex, virtualScrollX.value.endIndex);
+
+      return leftCols.concat(mainColumns).concat(rightCols);
+    }
+    return tableHeaderLast.value;
+  });
+
+  const virtualX_offsetRight = computed(() => {
+    if (!virtualX_on.value) return 0;
+    let width = 0;
+    for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
+      const col = tableHeaderLast.value[i];
+      width += parseInt(col.width || col.maxWidth || col.minWidth || Default_Col_Width);
+    }
+    return width;
+  });
+
+  /**
+   * 初始化Y虚拟滚动参数
+   * @param {number} [height] 虚拟滚动的高度
+   */
+  function initVirtualScrollY(height?: number) {
+    if (virtual_on.value) {
+      virtualScroll.value.containerHeight =
+        typeof height === 'number' ? height : tableContainer.value?.offsetHeight || Default_Table_Height;
+      updateVirtualScrollY(tableContainer.value?.scrollTop);
+      // const { offsetTop, containerHeight, rowHeight } = virtualScroll.value;
+      // const tableAllHeight = dataSourceCopy.value.length * rowHeight;
+      // const overflowHeight = tableAllHeight - containerHeight;
+      // if (overflowHeight < offsetTop && overflowHeight > 0) {
+      //   virtualScroll.value.offsetTop = overflowHeight;
+      //   virtualScroll.value.startIndex = Math.ceil(overflowHeight / rowHeight);
+      // } else if (overflowHeight <= 0) {
+      //   virtualScroll.value.offsetTop = 0;
+      //   virtualScroll.value.startIndex = 0;
+      // }
+    }
+  }
+
+  function initVirtualScrollX() {
+    if (props.virtualX) {
+      const { offsetWidth, scrollLeft } = tableContainer.value || {};
+      // scrollTo(null, 0);
+      virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+      updateVirtualScrollX(scrollLeft);
+    }
+  }
+
+  /** 通过滚动条位置，计算虚拟滚动的参数 */
+  function updateVirtualScrollY(sTop = 0) {
+    const { rowHeight } = virtualScroll.value;
+    const startIndex = Math.floor(sTop / rowHeight);
+    Object.assign(virtualScroll.value, {
+      startIndex,
+      offsetTop: startIndex * rowHeight, // startIndex之前的高度
+    });
+  }
+
+  /** 通过横向滚动条位置，计算横向虚拟滚动的参数 */
+  function updateVirtualScrollX(sLeft = 0) {
+    if (!tableHeaderLast.value?.length) return;
+    let startIndex = 0;
+    let offsetLeft = 0;
+
+    let colWidthSum = 0;
+    for (let colIndex = 0; colIndex < tableHeaderLast.value.length; colIndex++) {
+      startIndex++;
+      const col = tableHeaderLast.value[colIndex];
+      // fixed left 不进入计算列宽
+      if (col.fixed === 'left') continue;
+      const colWidth = parseInt(col.width || col.maxWidth || col.minWidth || Default_Col_Width);
+      colWidthSum += colWidth;
+      // 列宽（非固定列）加到超过scrollLeft的时候，表示startIndex从上一个开始下标
+      if (colWidthSum >= sLeft) {
+        offsetLeft = colWidthSum - colWidth;
+        startIndex--;
+        break;
+      }
+    }
+    // -----
+    colWidthSum = 0;
+    let endIndex = tableHeaderLast.value.length;
+    for (let colIndex = startIndex; colIndex < tableHeaderLast.value.length - 1; colIndex++) {
+      const col = tableHeaderLast.value[colIndex];
+      colWidthSum += parseInt(col.width || col.maxWidth || col.minWidth || Default_Col_Width);
+      // 列宽大于容器宽度则停止
+      if (colWidthSum >= virtualScrollX.value.containerWidth) {
+        endIndex = colIndex + 2; // TODO:预渲染的列数
+        break;
+      }
+    }
+    Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft });
+  }
+
+  return {
+    virtualScroll,
+    virtualScrollX,
+    virtual_on,
+    virtual_dataSourcePart,
+    virtual_offsetBottom,
+    virtualX_on,
+    virtualX_columnPart,
+    virtualX_offsetRight,
+    initVirtualScrollY,
+    initVirtualScrollX,
+    updateVirtualScrollY,
+    updateVirtualScrollX,
+  };
+}