stk-table-vue 0.6.17 → 0.7.1

package/lib/stk-table-vue.js

@@ -1,5 +1,4 @@
-import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, createVNode } from "vue";
-import { interpolateRgb } from "d3-interpolate";
+import { createElementBlock, openBlock, createElementVNode, watch, onMounted, onBeforeUnmount, ref, computed, shallowRef, defineComponent, nextTick, toRaw, normalizeStyle, normalizeClass, unref, createCommentVNode, renderSlot, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, createTextVNode, withCtx, createVNode } from "vue";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -7,13 +6,13 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$2 = {};
-const _hoisted_1$2 = {
+const _sfc_main$3 = {};
+const _hoisted_1$3 = {
   class: "drag-row-handle",
   draggable: "true"
 };
-function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("span", _hoisted_1$2, _cache[0] || (_cache[0] = [
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("span", _hoisted_1$3, _cache[0] || (_cache[0] = [
     createElementVNode("svg", {
       viewBox: "0 0 1024 1024",
       width: "16",
@@ -24,16 +23,16 @@ function _sfc_render$1(_ctx, _cache) {
     ], -1)
   ]));
 }
-const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
-const _sfc_main$1 = {};
-const _hoisted_1$1 = {
+const DragHandle = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+const _sfc_main$2 = {};
+const _hoisted_1$2 = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
   viewBox: "0 0 16 16"
 };
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
     createElementVNode("polygon", {
       class: "arrow-up",
       fill: "#757699",
@@ -46,7 +45,13 @@ function _sfc_render(_ctx, _cache) {
     }, null, -1)
   ]));
 }
-const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
+const SortIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
+const _sfc_main$1 = {};
+const _hoisted_1$1 = { class: "stk-fold-icon" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1);
+}
+const TriangleIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
 function isEmptyValue(val, isNumber) {
   let isEmpty = val === null || val === void 0;
   if (isNumber) {
@@ -55,24 +60,28 @@ function isEmptyValue(val, isNumber) {
   return isEmpty;
 }
 function insertToOrderedArray(sortState, newItem, targetArray, sortConfig = {}) {
-  const { dataIndex, order } = sortState;
-  sortConfig = { emptyToBottom: false, ...sortConfig };
+  const { dataIndex, sortField, order } = sortState;
   let { sortType } = sortState;
-  if (!sortType) sortType = typeof newItem[dataIndex];
+  const field = sortField || dataIndex;
+  if (!sortType) sortType = typeof newItem[field];
   const data = targetArray.slice();
   if (!order || !data.length) {
     data.unshift(newItem);
     return data;
   }
-  const targetVal = newItem[dataIndex];
-  if (sortConfig.emptyToBottom && isEmptyValue(targetVal)) {
+  const { emptyToBottom, customCompare, stringLocaleCompare } = { emptyToBottom: false, ...sortConfig };
+  const targetVal = newItem[field];
+  if (emptyToBottom && isEmptyValue(targetVal)) {
     data.push(newItem);
   } else {
+    const customCompareFn = customCompare || ((a, b) => {
+      const midVal = a[field];
+      const compareRes = strCompare(midVal, targetVal, isNumber, stringLocaleCompare);
+      return order === "asc" ? compareRes : -compareRes;
+    });
     const isNumber = sortType === "number";
     const sIndex = binarySearch(data, (midIndex) => {
-      const midVal = data[midIndex][dataIndex];
-      const compareRes = strCompare(midVal, targetVal, isNumber, sortConfig.stringLocaleCompare);
-      return order === "asc" ? compareRes : -compareRes;
+      return customCompareFn(data[midIndex], newItem);
     });
     data.splice(sIndex, 0, newItem);
   }
@@ -189,7 +198,6 @@ const HIGHLIGHT_COLOR = {
   dark: { from: "#1e4c99", to: "#181c21" }
 };
 const HIGHLIGHT_DURATION = 2e3;
-const HIGHLIGHT_FREQ = 1e3 / 30;
 const HIGHLIGHT_ROW_CLASS = "highlight-row";
 const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 const _chromeVersion = getBrowsersVersion("chrome");
@@ -610,25 +618,21 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     light: HIGHLIGHT_COLOR.light,
     dark: HIGHLIGHT_COLOR.dark
   };
-  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
-  const highlightFrequency = config.fps && config.fps > 0 ? 1e3 / config.fps : null;
-  const highlightSteps = highlightFrequency ? Math.round(highlightDuration / highlightFrequency) : null;
+  const highlightDuration = computed(() => config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION);
+  const highlightFrequency = computed(() => config.fps && config.fps > 0 ? 1e3 / config.fps : null);
+  const highlightSteps = computed(() => highlightFrequency.value ? Math.round(highlightDuration.value / highlightFrequency.value) : null);
   const highlightFrom = computed(() => highlightColor[props.theme].from);
-  const highlightTo = computed(() => highlightColor[props.theme].to);
-  const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
-  const highlightDimRowsJs = /* @__PURE__ */ new Map();
-  let calcHighlightDimLoopJs = false;
   const highlightDimRowsAnimation = /* @__PURE__ */ new Map();
   let calcHighlightDimLoopAnimation = false;
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
-  const defaultHighlightDimOption = (() => {
+  const defaultHighlightDimOption = computed(() => {
     const keyframe = { backgroundColor: [highlightFrom.value, ""] };
-    if (highlightSteps) {
-      keyframe.easing = `steps(${highlightSteps})`;
+    if (highlightSteps.value) {
+      keyframe.easing = `steps(${highlightSteps.value})`;
     }
-    return { duration: highlightDuration, keyframe };
-  })();
+    return { duration: highlightDuration.value, keyframe };
+  });
   function calcRowHighlightLoop() {
     if (calcHighlightDimLoopAnimation) return;
     calcHighlightDimLoopAnimation = true;
@@ -656,39 +660,13 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     };
     recursion();
   }
-  function calcRowHighlightLoopJs() {
-    if (calcHighlightDimLoopJs) return;
-    calcHighlightDimLoopJs = true;
-    const recursion = () => {
-      window.setTimeout(() => {
-        const nowTs = Date.now();
-        highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
-          const progress = (nowTs - highlightStart) / highlightDuration;
-          let bgc = "";
-          if (0 <= progress && progress <= 1) {
-            bgc = highlightInter.value(progress);
-          } else {
-            highlightDimRowsJs.delete(rowKeyValue);
-          }
-          updateRowBgcJs(rowKeyValue, bgc);
-        });
-        if (highlightDimRowsJs.size > 0) {
-          recursion();
-        } else {
-          calcHighlightDimLoopJs = false;
-          highlightDimRowsJs.clear();
-        }
-      }, highlightFrequency || HIGHLIGHT_FREQ);
-    };
-    recursion();
-  }
   function setHighlightDimCell(rowKeyValue, colKeyValue, option = {}) {
     var _a;
     const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
     const { className, method, duration, keyframe } = {
       className: HIGHLIGHT_CELL_CLASS,
       method: "animation",
-      ...defaultHighlightDimOption,
+      ...defaultHighlightDimOption.value,
       ...option
     };
     if (!cellEl) return;
@@ -703,7 +681,7 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     const { className, method, keyframe, duration } = {
       className: HIGHLIGHT_ROW_CLASS,
       method: "animation",
-      ...defaultHighlightDimOption,
+      ...defaultHighlightDimOption.value,
       ...option
     };
     if (method === "css") {
@@ -725,14 +703,6 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
           rowEl.animate(keyframe, duration);
         }
       }
-    } else if (method === "js") {
-      const nowTs = Date.now();
-      for (let i = 0; i < rowKeyValues.length; i++) {
-        const rowKeyValue = rowKeyValues[i];
-        highlightDimRowsJs.set(rowKeyValue, nowTs);
-        updateRowBgcJs(rowKeyValue, highlightFrom.value);
-      }
-      calcRowHighlightLoopJs();
     }
   }
   function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
@@ -798,11 +768,6 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
       });
     }
   }
-  function updateRowBgcJs(rowKeyValue, color) {
-    const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
-    if (!rowEl) return;
-    rowEl.style.backgroundColor = color;
-  }
   return {
     highlightSteps,
     setHighlightDimRow,
@@ -884,6 +849,57 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     if (!isMouseOver) isMouseOver = true;
   }
 }
+function useRowExpand({ dataSourceCopy, rowKeyGen, emits }) {
+  function toggleExpandRow(row, col) {
+    const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
+    setRowExpand(row, isExpand, { col });
+  }
+  function setRowExpand(rowKeyOrRow, expand, data) {
+    let rowKey;
+    if (typeof rowKeyOrRow === "string") {
+      rowKey = rowKeyOrRow;
+    } else {
+      rowKey = rowKeyGen(rowKeyOrRow);
+    }
+    const tempData = dataSourceCopy.value.slice();
+    const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
+    if (index === -1) {
+      console.warn("expandRow failed.rowKey:", rowKey);
+      return;
+    }
+    for (let i = index + 1; i < tempData.length; i++) {
+      const item = tempData[i];
+      const rowKey2 = item.__ROW_KEY__;
+      if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
+        tempData.splice(i, 1);
+        i--;
+      } else {
+        break;
+      }
+    }
+    const row = tempData[index];
+    const col = (data == null ? void 0 : data.col) || null;
+    if (expand) {
+      const newExpandRow = {
+        __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
+        __EXPANDED_ROW__: row,
+        __EXPANDED_COL__: col
+      };
+      tempData.splice(index + 1, 0, newExpandRow);
+    }
+    if (row) {
+      row.__EXPANDED__ = expand ? col : null;
+    }
+    dataSourceCopy.value = tempData;
+    if (!(data == null ? void 0 : data.silent)) {
+      emits("toggle-row-expand", { expanded: Boolean(expand), row, col });
+    }
+  }
+  return {
+    toggleExpandRow,
+    setRowExpand
+  };
+}
 function useThDrag({ props, emits, colKeyGen }) {
   const findParentTH = (e) => e.target.closest("th");
   const dragConfig = computed(() => {
@@ -1364,6 +1380,125 @@ function useVirtualScroll({
     clearAllAutoHeight
   };
 }
+function useTree({ props, dataSourceCopy, rowKeyGen, emits }) {
+  const { defaultExpandAll, defaultExpandKeys, defaultExpandLevel } = props.treeConfig;
+  function toggleTreeNode(row, col) {
+    const expand = row ? !row.__T_EXPANDED__ : false;
+    privateSetTreeExpand(row, { expand, col, isClick: true });
+  }
+  function privateSetTreeExpand(row, option) {
+    const rowKeyOrRowArr = Array.isArray(row) ? row : [row];
+    const tempData = dataSourceCopy.value.slice();
+    for (let i = 0; i < rowKeyOrRowArr.length; i++) {
+      const rowKeyOrRow = rowKeyOrRowArr[i];
+      let rowKey;
+      if (typeof rowKeyOrRow === "string") {
+        rowKey = rowKeyOrRow;
+      } else {
+        rowKey = rowKeyGen(rowKeyOrRow);
+      }
+      const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
+      if (index === -1) {
+        console.warn("treeExpandRow failed.rowKey:", rowKey);
+        return;
+      }
+      const row2 = tempData[index];
+      const level = row2.__T_LV__ || 0;
+      let expanded = option == null ? void 0 : option.expand;
+      if (expanded === void 0) {
+        expanded = !row2.__T_EXPANDED__;
+      }
+      if (expanded) {
+        const children = expandNode(row2, level);
+        tempData.splice(index + 1, 0, ...children);
+      } else {
+        const deleteCount = foldNode(index, tempData, level);
+        tempData.splice(index + 1, deleteCount);
+      }
+      setNodeExpanded(row2, expanded, level);
+      if (option.isClick) {
+        emits("toggle-tree-expand", { expanded: Boolean(expanded), row: row2, col: option.col });
+      }
+    }
+    dataSourceCopy.value = tempData;
+  }
+  function setTreeExpand(row, option) {
+    privateSetTreeExpand(row, { ...option, isClick: false });
+  }
+  function setNodeExpanded(row, expanded, level, parent) {
+    row.__T_EXPANDED__ = expanded;
+    if (level !== void 0) {
+      row.__T_LV__ = level;
+    }
+    if (parent) {
+      row.__T_PARENT_K__ = rowKeyGen(parent);
+    }
+  }
+  function flatTreeData(data) {
+    const result = [];
+    (function recursion(data2, level, parent) {
+      if (!data2) return;
+      for (let i = 0; i < data2.length; i++) {
+        const item = data2[i];
+        result.push(item);
+        const isExpanded = Boolean(item.__T_EXPANDED__);
+        setNodeExpanded(item, isExpanded, level, parent);
+        if (!isExpanded) {
+          if (defaultExpandAll) {
+            setNodeExpanded(item, true);
+          } else {
+            if (defaultExpandLevel) {
+              if (level < defaultExpandLevel) {
+                setNodeExpanded(item, true);
+              }
+            }
+            if (defaultExpandKeys) {
+              if (defaultExpandKeys.includes(rowKeyGen(item))) {
+                setNodeExpanded(item, true);
+              }
+            }
+            if (!item.__T_EXPANDED__) {
+              continue;
+            }
+          }
+        }
+        recursion(item.children, level + 1, item);
+      }
+    })(data, 0);
+    return result;
+  }
+  function expandNode(row, level) {
+    let result = [];
+    row.children && row.children.forEach((child) => {
+      result.push(child);
+      const childLv = level + 1;
+      if (child.__T_EXPANDED__ && child.children) {
+        const res = expandNode(child, childLv);
+        result = result.concat(res);
+      } else {
+        setNodeExpanded(child, false, childLv, row);
+      }
+    });
+    return result;
+  }
+  function foldNode(index, tempData, level) {
+    let deleteCount = 0;
+    for (let i = index + 1; i < tempData.length; i++) {
+      const child = tempData[i];
+      if (child.__T_LV__ && child.__T_LV__ > level) {
+        deleteCount++;
+      } else {
+        break;
+      }
+    }
+    return deleteCount;
+  }
+  return {
+    toggleTreeNode,
+    setTreeExpand,
+    flatTreeData
+  };
+}
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_2 = ["onMousedown"];
 const _hoisted_3 = { class: "table-header-title" };
@@ -1381,7 +1516,7 @@ const _hoisted_8 = ["colspan"];
 const _hoisted_9 = { class: "table-cell-wrapper" };
 const _hoisted_10 = ["data-cell-key", "onClick", "onMousedown", "onMouseenter", "onMouseleave", "onMouseover"];
 const _hoisted_11 = ["title"];
-const _hoisted_12 = { key: 1 };
+const _hoisted_12 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1403,7 +1538,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     columns: { default: () => [] },
     dataSource: { default: () => [] },
     rowKey: { type: [String, Number, Function], default: "" },
-    colKey: { type: [String, Number, Function], default: "dataIndex" },
+    colKey: {},
     emptyCellText: { type: [String, Function], default: "--" },
     noDataFull: { type: Boolean, default: false },
     showNoData: { type: Boolean, default: true },
@@ -1414,7 +1549,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cellHover: { type: Boolean, default: false },
     cellActive: { type: Boolean, default: false },
     selectedCellRevokable: { type: Boolean, default: true },
-    headerDrag: { default: false },
+    headerDrag: { type: Boolean, default: false },
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
@@ -1431,11 +1566,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     seqConfig: { default: () => ({}) },
     expandConfig: { default: () => ({}) },
     dragRowConfig: { default: () => ({}) },
+    treeConfig: { default: () => ({}) },
     cellFixedMode: { default: "sticky" },
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
     scrollRowByRow: { type: Boolean, default: false }
   },
-  emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "update:columns"],
+  emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "toggle-tree-expand", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const stkTableId = createStkTableId();
     const props = __props;
@@ -1456,7 +1592,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableHeaders = shallowRef([]);
     const tableHeadersForCalc = shallowRef([]);
     const tableHeaderLast = computed(() => tableHeadersForCalc.value.slice(-1)[0] || []);
-    const dataSourceCopy = shallowRef(props.dataSource.slice());
+    const isTreeData = computed(() => {
+      return props.columns.some((col) => col.type === "tree-node");
+    });
+    const dataSourceCopy = shallowRef([]);
     const rowKeyGenComputed = computed(() => {
       const { rowKey } = props;
       if (typeof rowKey === "function") {
@@ -1467,7 +1606,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const colKeyGen = computed(() => {
       const { colKey } = props;
-      if (typeof colKey === "function") {
+      if (colKey === void 0) {
+        return (col) => col.key || col.dataIndex;
+      } else if (typeof colKey === "function") {
         return (col) => colKey(col);
       } else {
         return (col) => col[colKey];
@@ -1481,7 +1622,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return (col, row) => emptyCellText({ row, col });
       }
     });
-    const rowKeyGenStore = /* @__PURE__ */ new WeakMap();
+    const rowKeyGenCache = /* @__PURE__ */ new WeakMap();
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
     const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
     const {
@@ -1540,6 +1681,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaderLast,
       fixedCols
     });
+    const { toggleExpandRow, setRowExpand } = useRowExpand({ dataSourceCopy, rowKeyGen, emits });
+    const { toggleTreeNode, setTreeExpand, flatTreeData } = useTree({ props, dataSourceCopy, rowKeyGen, emits });
     watch(
       () => props.columns,
       () => {
@@ -1558,6 +1701,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       }
     );
+    watch(
+      () => props.rowHeight,
+      () => {
+        initVirtualScrollY();
+      }
+    );
     watch(
       () => props.virtualX,
       () => {
@@ -1571,7 +1720,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.dataSource,
       (val) => {
-        if (!val) {
+        if (!Array.isArray(val)) {
           console.warn("invalid dataSource");
           return;
         }
@@ -1579,7 +1728,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (dataSourceCopy.value.length !== val.length) {
           needInitVirtualScrollY = true;
         }
-        dataSourceCopy.value = val.slice();
+        initDataSource(val);
         if (needInitVirtualScrollY) {
           nextTick(() => initVirtualScrollY());
         }
@@ -1596,11 +1745,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => updateFixedShadow()
     );
     dealColumns();
+    initDataSource();
     onMounted(() => {
       initVirtualScroll();
       updateFixedShadow();
       dealDefaultSorter();
     });
+    function initDataSource(v = props.dataSource) {
+      let dataSourceTemp = v.slice();
+      if (isTreeData.value) {
+        dataSourceTemp = flatTreeData(dataSourceTemp);
+      }
+      dataSourceCopy.value = dataSourceTemp;
+    }
     function dealDefaultSorter() {
       if (!props.sortConfig.defaultSort) return;
       const { key, dataIndex, order, silent } = { silent: false, ...props.sortConfig.defaultSort };
@@ -1677,13 +1834,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function rowKeyGen(row) {
       if (!row) return row;
-      let key = rowKeyGenStore.get(row) || row.__ROW_KEY__;
+      let key = rowKeyGenCache.get(row) || row.__ROW_KEY__;
       if (!key) {
         key = rowKeyGenComputed.value(row);
         if (key === void 0) {
           key = Math.random().toString();
         }
-        rowKeyGenStore.set(row, key);
+        rowKeyGenCache.set(row, key);
       }
       return key;
     }
@@ -1804,10 +1961,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onRowMenu(e, row, rowIndex) {
       emits("row-menu", e, row, { rowIndex });
     }
-    function onCellClick(e, row, col, rowIndex) {
+    function triangleClick(e, row, col) {
       if (col.type === "expand") {
         toggleExpandRow(row, col);
+      } else if (col.type === "tree-node") {
+        toggleTreeNode(row, col);
       }
+    }
+    function onCellClick(e, row, col, rowIndex) {
       if (props.cellActive) {
         const cellKey = cellKeyGen(row, col);
         const result = { row, col, select: false, rowIndex };
@@ -1966,51 +2127,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!sortOrder) return [];
       return [{ key: sortCol.value, order: sortOrder }];
     }
-    function toggleExpandRow(row, col) {
-      const isExpand = (row == null ? void 0 : row.__EXPANDED__) === col ? !(row == null ? void 0 : row.__EXPANDED__) : true;
-      setRowExpand(row, isExpand, { col });
-    }
-    function setRowExpand(rowKeyOrRow, expand, data) {
-      let rowKey;
-      if (typeof rowKeyOrRow === "string") {
-        rowKey = rowKeyOrRow;
-      } else {
-        rowKey = rowKeyGen(rowKeyOrRow);
-      }
-      const tempData = dataSourceCopy.value.slice();
-      const index = tempData.findIndex((it) => rowKeyGen(it) === rowKey);
-      if (index === -1) {
-        console.warn("expandRow failed.rowKey:", rowKey);
-        return;
-      }
-      for (let i = index + 1; i < tempData.length; i++) {
-        const item = tempData[i];
-        const rowKey2 = item.__ROW_KEY__;
-        if (rowKey2 == null ? void 0 : rowKey2.startsWith(EXPANDED_ROW_KEY_PREFIX)) {
-          tempData.splice(i, 1);
-          i--;
-        } else {
-          break;
-        }
-      }
-      const row = tempData[index];
-      const col = (data == null ? void 0 : data.col) || null;
-      if (expand) {
-        const newExpandRow = {
-          __ROW_KEY__: EXPANDED_ROW_KEY_PREFIX + rowKey,
-          __EXPANDED_ROW__: row,
-          __EXPANDED_COL__: col
-        };
-        tempData.splice(index + 1, 0, newExpandRow);
-      }
-      if (row) {
-        row.__EXPANDED__ = expand ? col : null;
-      }
-      dataSourceCopy.value = tempData;
-      if (!(data == null ? void 0 : data.silent)) {
-        emits("toggle-row-expand", { expanded: Boolean(expand), row, col });
-      }
-    }
     __expose({
       /**
        * 重新计算虚拟列表宽高
@@ -2122,7 +2238,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
        * en: Clear all row heights
        * @see {@link clearAllAutoHeight}
        */
-      clearAllAutoHeight
+      clearAllAutoHeight,
+      /**
+       * 设置树节点展开状态
+       *
+       * en: Set tree node expand state
+       * @see {@link setTreeExpand}
+       */
+      setTreeExpand
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -2186,7 +2309,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
                 key: rowIndex,
-                onContextmenu: _cache[3] || (_cache[3] = (e) => onHeaderMenu(e))
+                onContextmenu: _cache[3] || (_cache[3] = ($event) => onHeaderMenu($event))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                   key: 0,
@@ -2222,7 +2345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     unref(colResizeOn)(col) && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                       key: 0,
                       class: "table-header-resizer left",
-                      onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
+                      onMousedown: ($event) => unref(onThResizeMouseDown)($event, col, true)
                     }, null, 40, _hoisted_2)) : createCommentVNode("", true),
                     createElementVNode("div", {
                       class: "table-header-cell-wrapper",
@@ -2247,7 +2370,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     unref(colResizeOn)(col) ? (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: "table-header-resizer right",
-                      onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
+                      onMousedown: ($event) => unref(onThResizeMouseDown)($event, col)
                     }, null, 40, _hoisted_4)) : createCommentVNode("", true)
                   ], 46, _hoisted_1);
                 }), 128)),
@@ -2300,11 +2423,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({
                   "--row-height": row && row.__EXPANDED_ROW__ && props.virtual && ((_a = props.expandConfig) == null ? void 0 : _a.height) && ((_b = props.expandConfig) == null ? void 0 : _b.height) + "px"
                 }),
-                onClick: (e) => onRowClick(e, row, getRowIndex(rowIndex)),
-                onDblclick: (e) => onRowDblclick(e, row, getRowIndex(rowIndex)),
-                onContextmenu: (e) => onRowMenu(e, row, getRowIndex(rowIndex)),
-                onMouseover: (e) => onTrMouseOver(e, row),
-                onDrop: (e) => unref(onTrDrop)(e, getRowIndex(rowIndex))
+                onClick: ($event) => onRowClick($event, row, getRowIndex(rowIndex)),
+                onDblclick: ($event) => onRowDblclick($event, row, getRowIndex(rowIndex)),
+                onContextmenu: ($event) => onRowMenu($event, row, getRowIndex(rowIndex)),
+                onMouseover: ($event) => onTrMouseOver($event, row),
+                onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex))
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_7)) : createCommentVNode("", true),
                 row && row.__EXPANDED_ROW__ ? (openBlock(), createElementBlock("td", {
@@ -2333,42 +2456,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       {
                         "seq-column": col.type === "seq",
                         active: currentSelectedCellKey.value === cellKeyGen(row, col),
-                        "expand-cell": col.type === "expand",
                         expanded: col.type === "expand" && (row.__EXPANDED__ ? colKeyGen.value(row.__EXPANDED__) === colKeyGen.value(col) : false),
+                        "tree-expanded": col.type === "tree-node" && row.__T_EXPANDED__,
                         "drag-row-cell": col.type === "dragRow"
                       }
                     ]),
-                    onClick: (e) => onCellClick(e, row, col, getRowIndex(rowIndex)),
-                    onMousedown: (e) => onCellMouseDown(e, row, col, getRowIndex(rowIndex)),
-                    onMouseenter: (e) => onCellMouseEnter(e, row, col),
-                    onMouseleave: (e) => onCellMouseLeave(e, row, col),
-                    onMouseover: (e) => onCellMouseOver(e, row, col)
+                    onClick: ($event) => onCellClick($event, row, col, getRowIndex(rowIndex)),
+                    onMousedown: ($event) => onCellMouseDown($event, row, col, getRowIndex(rowIndex)),
+                    onMouseenter: ($event) => onCellMouseEnter($event, row, col),
+                    onMouseleave: ($event) => onCellMouseLeave($event, row, col),
+                    onMouseover: ($event) => onCellMouseOver($event, row, col)
                   }, [
-                    col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                    col.type === "expand" || col.type === "tree-node" ? (openBlock(), createElementBlock("div", {
                       key: 0,
                       class: "table-cell-wrapper",
-                      col,
-                      row,
-                      rowIndex: getRowIndex(rowIndex),
-                      colIndex,
-                      cellValue: row && row[col.dataIndex],
-                      expanded: row && row.__EXPANDED__ || null
-                    }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded"])) : (openBlock(), createElementBlock("div", {
-                      key: 1,
-                      class: normalizeClass(["table-cell-wrapper", { "expanded-cell-wrapper": col.type === "expand" }]),
-                      title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
+                      title: row == null ? void 0 : row[col.dataIndex],
+                      style: normalizeStyle({ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + "px" })
                     }, [
-                      col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
-                      ], 64)) : col.type === "expand" ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                        createVNode(DragHandle, {
-                          onDragstart: (e) => unref(onTrDragStart)(e, getRowIndex(rowIndex))
-                        }, null, 8, ["onDragstart"]),
-                        createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
-                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-                        createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
+                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                        key: 0,
+                        col,
+                        row,
+                        rowIndex: getRowIndex(rowIndex),
+                        colIndex,
+                        cellValue: row && row[col.dataIndex],
+                        expanded: row && row.__EXPANDED__ || null,
+                        "tree-expanded": row && row.__T_EXPANDED__ || null
+                      }, {
+                        foldIcon: withCtx(() => [
+                          createVNode(TriangleIcon)
+                        ]),
+                        _: 2
+                      }, 1032, ["col", "row", "rowIndex", "colIndex", "cellValue", "expanded", "tree-expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        col.type === "expand" || col.type === "tree-node" && row.children !== void 0 ? (openBlock(), createBlock(TriangleIcon, {
+                          key: 0,
+                          onClick: ($event) => triangleClick($event, row, col)
+                        }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                        createElementVNode("span", {
+                          style: normalizeStyle(col.type === "tree-node" && !row.children ? "padding-left: 16px;" : "")
+                        }, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 5)
                       ], 64))
-                    ], 10, _hoisted_11))
+                    ], 12, _hoisted_11)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+                        key: 0,
+                        class: "table-cell-wrapper",
+                        col,
+                        row,
+                        rowIndex: getRowIndex(rowIndex),
+                        colIndex,
+                        cellValue: row && row[col.dataIndex]
+                      }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: "table-cell-wrapper",
+                        title: col.type !== "seq" ? row == null ? void 0 : row[col.dataIndex] : ""
+                      }, [
+                        col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                          createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)
+                        ], 64)) : col.type === "dragRow" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                          createVNode(DragHandle, {
+                            onDragstart: ($event) => unref(onTrDragStart)($event, getRowIndex(rowIndex))
+                          }, null, 8, ["onDragstart"]),
+                          createElementVNode("span", null, toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? ""), 1)
+                        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                          createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
+                        ], 64))
+                      ], 8, _hoisted_12))
+                    ], 64))
                   ], 46, _hoisted_10);
                 }), 128))
               ], 46, _hoisted_6);