@deot/vc 1.0.11 → 1.0.12

package/dist/index.umd.cjs

@@ -31721,6 +31721,7 @@
         isVisible.value = cursorDown.value;
       };
       const refreshThumb = () => raf(() => {
+        if (!thumb.value) return;
         thumb.value.style[prefixStyle("transform").camel] = `translate${barOptions.value.axis}(${thumbMove.value}px)`;
       });
       const refreshThrottleThumb = throttle$2(refreshThumb, 10);
@@ -36513,6 +36514,7 @@
         columnFillSize.value = sizes.map((i) => contentMaxSize.value - i);
       };
       const setFirstItemIndex = () => {
+        if (!wrapper.value) return;
         const position = wrapper.value[K.scrollAxis];
         let item;
         for (let i = 0; i < rebuildData.value.length; i++) {
@@ -36677,6 +36679,7 @@
         await refreshLayout(0, rebuildData.value.length);
       };
       const handleResize = throttle$1(async () => {
+        if (!wrapper.value) return;
         const isNeedRefreshLayout = rebuildData.value.some((i) => !i.isPlaceholder);
         if (isNeedRefreshLayout) {
           const oldFirstItemIndex = firstItemIndex.value;
@@ -37080,88 +37083,65 @@
       };
     }
   });
-  const parseHeight = (height) => {
-    if (typeof height === "number") {
-      return height;
+  const parseHeight = (v) => {
+    if (typeof v === "number") {
+      return v;
     }
-    if (height && typeof height === "string") {
-      if (/^\d+(?:px)?/.test(height)) {
-        return parseInt(height, 10);
+    if (v && typeof v === "string") {
+      if (/^\d+(?:px)?/.test(v)) {
+        return parseInt(v, 10);
       }
       throw new VcError("table", "Invalid Height");
     }
     return null;
   };
-  const parseWidth = (width) => {
-    if (width !== void 0) {
-      width = parseInt(width, 10);
-      if (isNaN(width)) {
-        width = null;
+  const parseWidth = (v) => {
+    if (typeof v === "number") {
+      return v;
+    }
+    let v1;
+    if (typeof v !== "undefined") {
+      v1 = parseInt(v, 10);
+      if (isNaN(v1)) {
+        v1 = null;
       }
     }
-    return width;
+    return v1;
   };
-  const parseMinWidth = (minWidth) => {
-    if (typeof minWidth !== "undefined") {
-      minWidth = parseWidth(minWidth);
-      if (isNaN(minWidth)) {
-        minWidth = 80;
+  const parseMinWidth = (v) => {
+    if (typeof v === "number") {
+      return v;
+    }
+    let v1;
+    if (typeof v !== "undefined") {
+      v1 = parseWidth(v);
+      if (isNaN(v1)) {
+        v = 80;
       }
     }
-    return minWidth;
+    return v1;
   };
-  const getRowIdentity = (row, rowKey) => {
+  const getRowValue = (row, primaryKey) => {
     if (row.__KEY__) return row.__KEY__;
     if (!row) throw new VcError("table", "row is required when get row identity");
-    if (typeof rowKey === "string") {
-      if (!rowKey.includes(".")) {
-        return row[rowKey];
+    if (typeof primaryKey === "string") {
+      if (!primaryKey.includes(".")) {
+        return row[primaryKey];
       }
-      const key = rowKey.split(".");
+      const key = primaryKey.split(".");
       let current = row;
       for (let i = 0; i < key.length; i++) {
         current = current[key[i]];
       }
       return current;
-    } else if (typeof rowKey === "function") {
-      return rowKey.call(null, row);
+    } else if (typeof primaryKey === "function") {
+      return primaryKey.call(null, row);
     }
   };
-  const walkTreeNode = (root, cb, opts = {}) => {
-    const {
-      childrenKey = "children",
-      lazyKey = "hasChildren",
-      level: baseLevel = 0
-    } = opts;
-    const isNil = (array) => !(Array.isArray(array) && array.length);
-    function _walker(parent, children, level) {
-      cb(parent, children, level);
-      children.forEach((item) => {
-        if (item[lazyKey]) {
-          cb(item, null, level + 1);
-          return;
-        }
-        const $children = item[childrenKey];
-        if (!isNil($children)) {
-          _walker(item, $children, level + 1);
-        }
-      });
-    }
-    root.forEach((item) => {
-      if (item[lazyKey]) {
-        cb(item, null, baseLevel);
-        return;
-      }
-      const children = item[childrenKey];
-      if (!isNil(children)) {
-        _walker(item, children, baseLevel);
-      }
-    });
-  };
-  const getKeysMap = (array = [], rowKey) => {
+  const getValuesMap = (array = [], primaryKey) => {
     const arrayMap = {};
     array.forEach((row, index) => {
-      arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+      arrayMap[getRowValue(row, primaryKey)] = { row, index };
     });
     return arrayMap;
   };
@@ -37174,23 +37154,74 @@
     });
     return column;
   };
-  const getColumnByCell = (table, cell) => {
+  const getColumnByCell = (columns, cell) => {
     const matches = (cell.className || "").match(/vc-table_[^\s]+/gm);
     if (matches) {
-      return getColumnById(table, matches[0]);
+      return getColumnById(columns, matches[0]);
     }
     return null;
   };
-  const getCell = (event2) => {
-    let cell = event2.target;
+  const getCell = (e) => {
+    let cell = e.target;
     while (cell && cell.tagName.toUpperCase() !== "HTML") {
-      if (cell.tagName.toUpperCase() === "TD") {
+      if (cell.classList.contains("vc-table__td")) {
         return cell;
       }
       cell = cell.parentNode;
     }
     return null;
   };
+  const getAllColumns = (columns) => {
+    const result = [];
+    columns.forEach((column) => {
+      if (column.children) {
+        result.push(column);
+        result.push(...getAllColumns(column.children));
+      } else {
+        result.push(column);
+      }
+    });
+    return result;
+  };
+  const columnsToRowsEffect = (v) => {
+    let maxLevel = 1;
+    const traverse = (column, parent) => {
+      if (parent) {
+        column.level = parent.level + 1;
+        if (maxLevel < column.level) {
+          maxLevel = column.level;
+        }
+      }
+      if (column.children) {
+        let colSpan = 0;
+        column.children.forEach((subColumn) => {
+          traverse(subColumn, column);
+          colSpan += subColumn.colSpan;
+        });
+        column.colSpan = colSpan;
+      } else {
+        column.colSpan = 1;
+      }
+    };
+    v.forEach((column) => {
+      column.level = 1;
+      traverse(column);
+    });
+    const rows = [];
+    for (let i = 0; i < maxLevel; i++) {
+      rows.push([]);
+    }
+    const allColumns = getAllColumns(v);
+    allColumns.forEach((column) => {
+      if (!column.children) {
+        column.rowSpan = maxLevel - column.level + 1;
+      } else {
+        column.rowSpan = 1;
+      }
+      rows[column.level - 1].push(column);
+    });
+    return rows;
+  };
   const flattenData = (data, opts = {}) => {
     const result = [];
     data.forEach((item) => {
@@ -37203,29 +37234,51 @@
     });
     return result;
   };
+  const walkTreeNode = (root, cb, opts = {}) => {
+    const {
+      childrenKey = "children",
+      lazyKey = "hasChildren",
+      level: baseLevel = 0
+    } = opts;
+    const isNil = (array) => !(Array.isArray(array) && array.length);
+    function _walker(parent, children, level) {
+      cb(parent, children, level);
+      children.forEach((item) => {
+        if (item[lazyKey]) {
+          cb(item, null, level + 1);
+          return;
+        }
+        const $children = item[childrenKey];
+        if (!isNil($children)) {
+          _walker(item, $children, level + 1);
+        }
+      });
+    }
+    root.forEach((item) => {
+      if (item[lazyKey]) {
+        cb(item, null, baseLevel);
+        return;
+      }
+      const children = item[childrenKey];
+      if (!isNil(children)) {
+        _walker(item, children, baseLevel);
+      }
+    });
+  };
   class BaseWatcher {
     states = vue.reactive({
       // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
       _data: [],
       data: [],
       list: [],
-      // 是否包含固定列
-      isComplex: false,
-      // 列
+      // 表头数据
+      headerRows: [],
+      // 列 动态收集vc-table-column中的columnConfig
       _columns: [],
-      // 动态收集vc-table-column中的columnConfig
       originColumns: [],
-      // leftFixedColumns, notFixedColumns, rightFixedColumns
-      columns: [],
-      // 包括 leftFixedLeafColumns，leafColumns，rightFixedLeafColumns
+      notFixedColumns: [],
       leftFixedColumns: [],
       rightFixedColumns: [],
-      leafColumns: [],
-      leftFixedLeafColumns: [],
-      rightFixedLeafColumns: [],
-      leafColumnsLength: 0,
-      leftFixedLeafColumnsLength: 0,
-      rightFixedLeafColumnsLength: 0,
       // 选择
       isAllSelected: false,
       selection: [],
@@ -37247,7 +37300,17 @@
       treeLazyData: [],
       // 源数据展开
       treeLazyColumnIdentifier: "hasChildren",
-      treeChildrenColumnName: "children"
+      treeChildrenColumnName: "children",
+      // compputeds
+      isComplex: vue.computed(() => this.states.leftFixedColumns.length > 0 || this.states.rightFixedColumns.length > 0),
+      isGroup: vue.computed(() => this.states.columns.length > this.states.originColumns.length),
+      columns: vue.computed(() => lodashExports.concat(this.states.leftFixedLeafColumns, this.states.leafColumns, this.states.rightFixedLeafColumns)),
+      leafColumns: vue.computed(() => flattenData(this.states.notFixedColumns)),
+      leftFixedLeafColumns: vue.computed(() => flattenData(this.states.leftFixedColumns)),
+      rightFixedLeafColumns: vue.computed(() => flattenData(this.states.rightFixedColumns)),
+      leafColumnsLength: vue.computed(() => this.states.leafColumns.length),
+      leftFixedLeafColumnsLength: vue.computed(() => this.states.leftFixedLeafColumns.length),
+      rightFixedLeafColumnsLength: vue.computed(() => this.states.rightFixedLeafColumns.length)
     });
   }
   class Expand {
@@ -37257,14 +37320,14 @@
     }
     update() {
       const store = this.store;
-      const { rowKey, defaultExpandAll } = this.store.table.props;
+      const { primaryKey, defaultExpandAll } = this.store.table.props;
       const { data = [], expandRows } = store.states;
       if (defaultExpandAll) {
         store.states.expandRows = data.slice();
-      } else if (rowKey) {
-        const expandRowsMap = getKeysMap(expandRows, rowKey);
+      } else if (primaryKey) {
+        const expandRowsMap = getValuesMap(expandRows, primaryKey);
         store.states.expandRows = data.reduce((prev, row) => {
-          const rowId = getRowIdentity(row, rowKey);
+          const rowId = getRowValue(row, primaryKey);
           const rowInfo = expandRowsMap[rowId];
           if (rowInfo) {
             prev.push(row);
@@ -37286,10 +37349,10 @@
     }
     reset(ids) {
       const store = this.store;
-      store.checkRowKey();
-      const { rowKey } = store.table.props;
+      store.checkPrimaryKey();
+      const { primaryKey } = store.table.props;
       const { data } = store.states;
-      const keysMap = getKeysMap(data, rowKey);
+      const keysMap = getValuesMap(data, primaryKey);
       store.states.expandRows = ids.reduce((prev, cur) => {
         const info2 = keysMap[cur];
         if (info2) {
@@ -37299,11 +37362,11 @@
       }, []);
     }
     isExpanded(row) {
-      const { rowKey } = this.store.table.props;
+      const { primaryKey } = this.store.table.props;
       const { expandRows = [] } = this.store.states;
-      if (rowKey) {
-        const expandMap = getKeysMap(expandRows, rowKey);
-        return !!expandMap[getRowIdentity(row, rowKey)];
+      if (primaryKey) {
+        const expandMap = getValuesMap(expandRows, primaryKey);
+        return !!expandMap[getRowValue(row, primaryKey)];
       }
       return expandRows.indexOf(row) !== -1;
     }
@@ -37315,22 +37378,22 @@
     }
     reset(id) {
       const store = this.store;
-      const { rowKey } = store.table.props;
-      store.checkRowKey();
+      const { primaryKey } = store.table.props;
+      store.checkPrimaryKey();
       const { data = [] } = store.states;
-      const currentRow = data.find((item) => getRowIdentity(item, rowKey) === id);
+      const currentRow = data.find((item) => getRowValue(item, primaryKey) === id);
       store.states.currentRow = currentRow || null;
     }
     update() {
       const store = this.store;
-      const { rowKey } = store.table.props;
+      const { primaryKey } = store.table.props;
       const { data = [], currentRow } = store.states;
       const oldCurrentRow = currentRow;
       if (oldCurrentRow && !data.includes(oldCurrentRow)) {
         let newCurrentRow = null;
-        if (rowKey) {
+        if (primaryKey) {
           newCurrentRow = data.find((item) => {
-            return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
+            return getRowValue(item, primaryKey) === getRowValue(oldCurrentRow, primaryKey);
           });
         }
         store.states.currentRow = newCurrentRow;
@@ -37348,8 +37411,8 @@
      * { id: { level, children } }
      */
     normalizedData = vue.computed(() => {
-      const { rowKey } = this.store.table.props;
-      if (!rowKey) return {};
+      const { primaryKey } = this.store.table.props;
+      if (!primaryKey) return {};
       return this.normalize(this.store.states.data || []);
     });
     /**
@@ -37357,7 +37420,7 @@
      * { id: { children } }
      */
     normalizedLazyNode = vue.computed(() => {
-      const { rowKey } = this.store.table.props;
+      const { primaryKey } = this.store.table.props;
       const { treelazyNodeMap, treeLazyColumnIdentifier, treeChildrenColumnName } = this.store.states;
       const keys = Object.keys(treelazyNodeMap);
       const res = {};
@@ -37366,7 +37429,7 @@
         if (treelazyNodeMap[key].length) {
           const item = { children: [] };
           treelazyNodeMap[key].forEach((row) => {
-            const id = getRowIdentity(row, rowKey);
+            const id = getRowValue(row, primaryKey);
             item.children.push(id);
             const hasChildren = row[treeLazyColumnIdentifier] || row[treeChildrenColumnName] && row[treeChildrenColumnName].length === 0;
             if (hasChildren && !res[id]) {
@@ -37386,16 +37449,16 @@
       );
     }
     normalize(data) {
-      const { rowKey } = this.store.table.props;
+      const { primaryKey } = this.store.table.props;
       const { treeChildrenColumnName, treeLazyColumnIdentifier, treeLazy } = this.store.states;
       const res = {};
       walkTreeNode(
         data,
         (parent, children, level) => {
-          const parentId = getRowIdentity(parent, rowKey);
+          const parentId = getRowValue(parent, primaryKey);
           if (Array.isArray(children)) {
             res[parentId] = {
-              children: children.map((row) => getRowIdentity(row, rowKey)),
+              children: children.map((row) => getRowValue(row, primaryKey)),
               level
             };
           } else if (treeLazy) {
@@ -37415,7 +37478,7 @@
     }
     // 获取当前展开最大的level
     getMaxLevel() {
-      const { rowKey } = this.store.table.props;
+      const { primaryKey } = this.store.table.props;
       const { data, treeData } = this.store.states;
       const levels = data.map((item) => {
         const traverse = (source) => {
@@ -37426,7 +37489,7 @@
             return source.level;
           }
         };
-        const id = getRowIdentity(item, rowKey);
+        const id = getRowValue(item, primaryKey);
         return traverse(treeData[id]);
       });
       return max$2(levels) || 0;
@@ -37488,10 +37551,10 @@
       this.update();
     }
     toggle(row, expanded) {
-      this.store.checkRowKey();
-      const { rowKey } = this.store.table.props;
+      this.store.checkPrimaryKey();
+      const { primaryKey } = this.store.table.props;
       const { treeData } = this.store.states;
-      const id = getRowIdentity(row, rowKey);
+      const id = getRowValue(row, primaryKey);
       const data = id && treeData[id];
       if (id && data && "expanded" in data) {
         const oldExpanded = data.expanded;
@@ -37504,10 +37567,10 @@
       }
     }
     loadOrToggle(row) {
-      this.store.checkRowKey();
-      const { rowKey } = this.store.table.props;
+      this.store.checkPrimaryKey();
+      const { primaryKey } = this.store.table.props;
       const { treeLazy, treeData } = this.store.states;
-      const id = getRowIdentity(row, rowKey);
+      const id = getRowValue(row, primaryKey);
       const data = treeData[id];
       if (treeLazy && data && "loaded" in data && !data.loaded) {
         this.loadData(row, id, data);
@@ -37516,9 +37579,9 @@
       }
     }
     loadData(row, key, treeNode) {
-      this.store.checkRowKey();
+      this.store.checkPrimaryKey();
       const { table } = this.store;
-      const { rowKey } = table.props;
+      const { primaryKey } = table.props;
       const { treelazyNodeMap, treeData, treeChildrenColumnName, treeLazyColumnIdentifier } = this.store.states;
       if (table.props.loadExpand && !treeData[key].loaded) {
         this.store.states.treeData[key].loading = true;
@@ -37533,7 +37596,7 @@
           walkTreeNode(
             data,
             (parent, _, level) => {
-              const id = getRowIdentity(parent, rowKey);
+              const id = getRowValue(parent, primaryKey);
               Object.defineProperty(parent, "__KEY__", {
                 value: `${level}__${id}`,
                 writable: false
@@ -37602,27 +37665,13 @@
       if (!this.store) {
         throw new VcError("table", "Table Layout 必须包含store实例");
       }
-      this.updateScroller = this.updateScroller.bind(this);
-      this.updateColumns = this.updateColumns.bind(this);
-      vue.onMounted(() => {
-        this.updateColumns();
-        this.updateScroller();
-      });
-      let __updated__;
-      vue.onUpdated(() => {
-        if (__updated__) return;
-        this.updateColumns();
-        this.updateScroller();
-        __updated__ = true;
-      });
     }
     updateScrollY() {
       const { height, bodyHeight } = this.states;
       if (height === null || bodyHeight === null) return;
-      const scroller = this.table.exposed.scroller.value;
-      if (this.table.vnode.el && scroller) {
-        const body = scroller.$el.querySelector(".vc-table__body");
-        this.states.scrollY = body.offsetHeight > bodyHeight;
+      const bodyYWrapper = this.table.exposed.bodyYWrapper.value;
+      if (this.table.vnode.el && bodyYWrapper) {
+        this.states.scrollY = bodyYWrapper.offsetHeight > bodyHeight;
       }
     }
     setHeight(value, prop = "height") {
@@ -37639,18 +37688,6 @@
     setMaxHeight(value) {
       this.setHeight(value, "max-height");
     }
-    getFlattenColumns() {
-      const flattenColumns = [];
-      const columns = this.store.states.columns;
-      columns.forEach((column) => {
-        if (column.isColumnGroup) {
-          flattenColumns.push(...column.columns);
-        } else {
-          flattenColumns.push(column);
-        }
-      });
-      return flattenColumns;
-    }
     updateElsHeight() {
       if (!this.table.exposed.isReady.value) return vue.nextTick(() => this.updateElsHeight());
       const table = this.table.exposed;
@@ -37673,13 +37710,12 @@
         this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
       }
       this.updateScrollY();
-      this.updateScroller();
     }
     updateColumnsWidth() {
       if (IS_SERVER$3) return;
       const bodyWidth = this.table.vnode.el.clientWidth;
       let bodyMinWidth = 0;
-      const flattenColumns = this.getFlattenColumns();
+      const flattenColumns = this.store.states.columns;
       const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
       const { fit } = this.table.props;
       if (flexColumns.length > 0 && fit) {
@@ -37705,7 +37741,7 @@
           }
         } else {
           this.states.scrollX = true;
-          flexColumns.forEach(function(column) {
+          flexColumns.forEach((column) => {
             column.realWidth = column.width || column.minWidth;
           });
         }
@@ -37739,12 +37775,6 @@
         });
         this.states.rightFixedWidth = rightFixedWidth;
       }
-      this.updateColumns();
-    }
-    // v2.x中的 notifyObservers
-    updateColumns() {
-    }
-    updateScroller() {
     }
   }
   class Store extends BaseWatcher {
@@ -37753,7 +37783,7 @@
     expand;
     tree;
     layout;
-    flattenData = vue.computed(() => {
+    flatData = vue.computed(() => {
       if (this.table.props.expandSelectable) {
         return lodashExports.concat(
           flattenData(this.states.data, { parent: true, cascader: true }),
@@ -37811,7 +37841,7 @@
           this.cleanSelection();
         }
       } else {
-        this.checkRowKey();
+        this.checkPrimaryKey();
         this.updateSelectionByRowKey();
       }
       this.updateAllSelected();
@@ -37833,10 +37863,10 @@
       }
     }
     /**
-     * 检查 rowKey 是否存在
+     * 检查 primaryKey 是否存在
      */
-    checkRowKey() {
-      const { rowKey } = this.table.props;
+    checkPrimaryKey() {
+      const { primaryKey } = this.table.props;
     }
     /**
      * states
@@ -37897,22 +37927,20 @@
     updateColumns() {
       const { states } = this;
       const _columns = states._columns || [];
-      states.leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
-      states.rightFixedColumns = _columns.filter((column) => column.fixed === "right");
-      if (states.leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
+      const leftFixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === "left");
+      const rightFixedColumns = _columns.filter((column) => column.fixed === "right");
+      if (leftFixedColumns.length > 0 && _columns[0] && _columns[0].type === "selection" && !_columns[0].fixed) {
         _columns[0].fixed = true;
-        states.leftFixedColumns.unshift(_columns[0]);
+        leftFixedColumns.unshift(_columns[0]);
       }
       const notFixedColumns = _columns.filter((column) => !column.fixed);
-      states.originColumns = lodashExports.concat(states.leftFixedColumns, notFixedColumns, states.rightFixedColumns);
-      const leafColumns = flattenData(notFixedColumns);
-      const leftFixedLeafColumns = flattenData(states.leftFixedColumns);
-      const rightFixedLeafColumns = flattenData(states.rightFixedColumns);
-      states.leafColumnsLength = leafColumns.length;
-      states.leftFixedLeafColumnsLength = leftFixedLeafColumns.length;
-      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
-      states.columns = lodashExports.concat(leftFixedLeafColumns, leafColumns, rightFixedLeafColumns);
-      states.isComplex = states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+      const originColumns = lodashExports.concat(leftFixedColumns, notFixedColumns, rightFixedColumns);
+      const headerRows = columnsToRowsEffect(originColumns);
+      states.leftFixedColumns = leftFixedColumns;
+      states.notFixedColumns = notFixedColumns;
+      states.rightFixedColumns = rightFixedColumns;
+      states.originColumns = originColumns;
+      states.headerRows = headerRows;
     }
     // 选择
     isSelected(row) {
@@ -37936,13 +37964,13 @@
      * 清理选择
      */
     cleanSelection() {
-      const { rowKey } = this.table.props;
+      const { primaryKey } = this.table.props;
       const { selection = [] } = this.states;
       let deleted;
-      if (rowKey) {
+      if (primaryKey) {
         deleted = [];
-        const selectedMap = getKeysMap(selection, rowKey);
-        const dataMap = getKeysMap(selection, rowKey);
+        const selectedMap = getValuesMap(selection, primaryKey);
+        const dataMap = getValuesMap(selection, primaryKey);
         for (const key in selectedMap) {
           if (hasOwn$1(selectedMap, key) && !dataMap[key]) {
             deleted.push(selectedMap[key].row);
@@ -37950,7 +37978,7 @@
         }
       } else {
         deleted = selection.filter((item) => {
-          return !this.flattenData.value.includes(item);
+          return !this.flatData.value.includes(item);
         });
       }
       deleted.forEach((deletedItem) => {
@@ -38011,7 +38039,7 @@
       const value = indeterminate ? !isAllSelected : !(isAllSelected || selection.length);
       this.states.isAllSelected = value;
       let selectionChanged = false;
-      this.flattenData.value.forEach((row, index) => {
+      this.flatData.value.forEach((row, index) => {
         if (selectable) {
           if (selectable.call(null, row, index) && this.toggleRowStatus(selection, row, value)) {
             selectionChanged = true;
@@ -38042,11 +38070,11 @@
       this.tree.expand(val);
     }
     updateSelectionByRowKey() {
-      const { rowKey } = this.table.props;
+      const { primaryKey } = this.table.props;
       const { selection } = this.states;
-      const selectedMap = getKeysMap(selection, rowKey);
-      this.states.selection = this.flattenData.value.reduce((prev, row) => {
-        const rowId = getRowIdentity(row, rowKey);
+      const selectedMap = getValuesMap(selection, primaryKey);
+      this.states.selection = this.flatData.value.reduce((prev, row) => {
+        const rowId = getRowValue(row, primaryKey);
         const rowInfo = selectedMap[rowId];
         if (rowInfo) {
           prev.push(row);
@@ -38062,7 +38090,7 @@
       }
       let isAllSelected = true;
       let selectedCount = 0;
-      const temp = this.flattenData.value;
+      const temp = this.flatData.value;
       for (let i = 0, j = temp.length; i < j; i++) {
         const row = temp[i];
         const isRowSelectable = selectable && selectable.call(null, row, i);
@@ -38172,6 +38200,7 @@
           type
         }) => type === "default")
       });
+      const wrapper = vue.ref();
       vue.watch(() => props2.store.states.hoverRowIndex, (v, oldV) => {
         if (!props2.store.states.isComplex || IS_SERVER$3) return;
         raf(() => {
@@ -38182,12 +38211,12 @@
           newRow && addClass(newRow, "hover-row");
         });
       });
-      const getKeyOfRow = (row, index) => {
+      const getValueOfRow = (row, index) => {
         const {
-          rowKey
+          primaryKey
         } = table.props;
-        if (rowKey) {
-          return getRowIdentity(row, rowKey);
+        if (primaryKey) {
+          return getRowValue(row, primaryKey);
         }
         return index;
       };
@@ -38252,7 +38281,7 @@
         return cellStyle;
       };
       const getCellClass = (rowIndex, columnIndex, row, column) => {
-        const classes = [column.align, column.className];
+        const classes = [column.realAlign, column.className];
         if (isColumnHidden(columnIndex)) {
           classes.push("is-hidden");
         }
@@ -38308,7 +38337,7 @@
         const cell = getCell(e);
         if (!cell) return;
         const oldHoverState = table.exposed.hoverState.value || {};
-        table.emit("cell-mouse-leave", oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
+        table.emit("cell-mouse-leave", oldHoverState.row, oldHoverState.column, oldHoverState.cell, e);
       };
       const handleMouseEnter = debounce$1((index) => {
         props2.store.setHoverRow(index);
@@ -38344,7 +38373,7 @@
         const {
           columns
         } = states;
-        const key = getKeyOfRow(row, rowIndex);
+        const key = getValueOfRow(row, rowIndex);
         return vue.createVNode("div", {
           "key": key,
           "class": [getRowClass(row, rowIndex), "vc-table__tr"],
@@ -38408,13 +38437,12 @@
           }
         });
       };
-      const wrapper = vue.ref();
       expose({
         wrapper,
         getRootElement: () => instance.vnode.el
       });
+      const layout = table.exposed.layout;
       return () => {
-        const layout = table.exposed.layout;
         return vue.createVNode("div", {
           "class": "vc-table__body"
         }, [table.props.height ? vue.createVNode(RecycleList, {
@@ -38459,57 +38487,6 @@
   });
   const TableSort = "div";
   const TableFilter = "div";
-  const getAllColumns = (columns) => {
-    const result = [];
-    columns.forEach((column) => {
-      if (column.children) {
-        result.push(column);
-        result.push(...getAllColumns(column.children));
-      } else {
-        result.push(column);
-      }
-    });
-    return result;
-  };
-  const convertToRows = (originColumns) => {
-    let maxLevel = 1;
-    const traverse = (column, parent) => {
-      if (parent) {
-        column.level = parent.level + 1;
-        if (maxLevel < column.level) {
-          maxLevel = column.level;
-        }
-      }
-      if (column.children) {
-        let colSpan = 0;
-        column.children.forEach((subColumn) => {
-          traverse(subColumn, column);
-          colSpan += subColumn.colSpan;
-        });
-        column.colSpan = colSpan;
-      } else {
-        column.colSpan = 1;
-      }
-    };
-    originColumns.forEach((column) => {
-      column.level = 1;
-      traverse(column);
-    });
-    const rows = [];
-    for (let i = 0; i < maxLevel; i++) {
-      rows.push([]);
-    }
-    const allColumns = getAllColumns(originColumns);
-    allColumns.forEach((column) => {
-      if (!column.children) {
-        column.rowSpan = maxLevel - column.level + 1;
-      } else {
-        column.rowSpan = 1;
-      }
-      rows[column.level - 1].push(column);
-    });
-    return rows;
-  };
   const TableHeader = /* @__PURE__ */ vue.defineComponent({
     name: "vc-table-header",
     props: {
@@ -38536,16 +38513,18 @@
         isAllSelected: "isAllSelected",
         leftFixedLeafCount: "leftFixedLeafColumnsLength",
         rightFixedLeafCount: "rightFixedLeafColumnsLength",
+        isGroup: "isGroup",
+        headerRows: "headerRows",
         columnsCount: ($states) => $states.columns.length,
         leftFixedCount: ($states) => $states.leftFixedColumns.length,
         rightFixedCount: ($states) => $states.rightFixedColumns.length
       });
-      const isCellHidden = (index, columns) => {
+      const isColumnHidden = (index) => {
         let start = 0;
         for (let i = 0; i < index; i++) {
-          start += columns[i].colSpan;
+          start += states.columns[i].colSpan;
         }
-        const after = start + columns[index].colSpan - 1;
+        const after = start + states.columns[index].colSpan - 1;
         if (props2.fixed === true || props2.fixed === "left") {
           return after >= states.leftFixedLeafCount;
         } else if (props2.fixed === "right") {
@@ -38554,6 +38533,9 @@
           return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
         }
       };
+      const columnsHidden = vue.computed(() => {
+        return states.columns.map((_, index) => isColumnHidden(index));
+      });
       const getHeaderRowStyle = (rowIndex) => {
         const {
           headerRowStyle
@@ -38594,8 +38576,8 @@
         return headerCellStyle;
       };
       const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
-        const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClass];
-        if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
+        const classes = [column.id, column.order, column.realHeaderAlign, column.className, column.labelClass];
+        if (rowIndex === 0 && columnsHidden.value[columnIndex]) {
           classes.push("is-hidden");
         }
         if (!column.children) {
@@ -38734,35 +38716,27 @@
         });
       };
       return () => {
-        const {
-          originColumns
-        } = props2.store.states;
-        const columnRows = convertToRows(originColumns);
-        const isGroup = columnRows.length > 1;
-        if (isGroup) table.exposed.isGroup.value = true;
         return vue.createVNode("div", {
           "class": "vc-table__header"
         }, [vue.createVNode("div", {
           "class": [{
-            "is-group": isGroup
+            "is-group": states.isGroup
           }, "vc-table__thead"]
         }, [
           // renderList
-          columnRows.map((columns, rowIndex) => vue.createVNode("div", {
+          states.headerRows.map((columns, rowIndex) => vue.createVNode("div", {
             "style": getHeaderRowStyle(rowIndex),
             "class": [getHeaderRowClass(rowIndex), "vc-table__tr"]
-          }, [columns.map((column, cellIndex) => vue.createVNode("div", {
-            "colspan": column.colSpan,
-            "rowspan": column.rowSpan,
-            "onMousemove": ($event) => handleMouseMove($event, column),
+          }, [columns.map((column, columnIndex) => vue.createVNode("div", {
+            "onMousemove": (e) => handleMouseMove(e, column),
             "onMouseout": handleMouseOut,
-            "onMousedown": ($event) => handleMouseDown($event, column),
-            "onClick": ($event) => handleHeaderClick($event, column),
-            "onContextmenu": ($event) => handleHeaderContextMenu($event, column),
-            "style": [getHeaderCellStyle(rowIndex, cellIndex, columns, column), {
+            "onMousedown": (e) => handleMouseDown(e, column),
+            "onClick": (e) => handleHeaderClick(e, column),
+            "onContextmenu": (e) => handleHeaderContextMenu(e, column),
+            "style": [getHeaderCellStyle(rowIndex, columnIndex, columns, column), {
               width: `${column.realWidth}px`
             }],
-            "class": [getHeaderCellClass(rowIndex, cellIndex, columns, column), "vc-table__th"],
+            "class": [getHeaderCellClass(rowIndex, columnIndex, columns, column), "vc-table__th"],
             "key": column.id
           }, [vue.createVNode("div", {
             "class": [
@@ -38774,10 +38748,8 @@
             ]
           }, [column.renderHeader ? column.renderHeader({
             column,
-            $index: cellIndex,
-            // index: cellIndex,
-            store: props2.store,
-            _self: instance
+            columnIndex,
+            store: props2.store
           }) : column.label, column.tooltip ? vue.createVNode(Icon, {
             "type": "o-info",
             "onMouseenter": (e) => handleCellMouseEnter(e, column)
@@ -38819,13 +38791,13 @@
         leftFixedCount: ($states) => $states.leftFixedColumns.length,
         rightFixedCount: ($states) => $states.rightFixedColumns.length
       });
-      const isCellHidden = (index, columns, column) => {
+      const isColumnHidden = (column, index) => {
         if (props2.fixed === true || props2.fixed === "left") {
           return index >= states.leftFixedLeafCount;
         } else if (props2.fixed === "right") {
           let before = 0;
           for (let i = 0; i < index; i++) {
-            before += columns[i].colSpan;
+            before += states.columns[i].colSpan;
           }
           return before < states.columnsCount - states.rightFixedLeafCount;
         } else if (!props2.fixed && column.fixed) {
@@ -38834,12 +38806,13 @@
           return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
         }
       };
-      const getRowClasses = (column, cellIndex) => {
-        const classes = [column.id, column.align, column.labelClass];
+      const columnsHidden = vue.computed(() => states.columns.map(isColumnHidden));
+      const getRowClasses = (column, columnIndex) => {
+        const classes = [column.realAlign, column.labelClass];
         if (column.className) {
           classes.push(column.className);
         }
-        if (isCellHidden(cellIndex, states.columns, column)) {
+        if (columnsHidden.value[columnIndex]) {
           classes.push("is-hidden");
         }
         if (!column.children) {
@@ -38847,17 +38820,17 @@
         }
         return classes;
       };
-      return () => {
-        let sums = [];
+      const sums = vue.computed(() => {
+        let v = [];
         if (props2.getSummary) {
-          sums = props2.getSummary({
+          v = props2.getSummary({
             columns: states.columns,
             data: states.data
           });
         } else {
           states.columns.forEach((column, index) => {
             if (index === 0) {
-              sums[index] = props2.sumText;
+              v[index] = props2.sumText;
               return;
             }
             const values = states.data.map((item) => Number(item[column.prop]));
@@ -38872,7 +38845,7 @@
             });
             const precision = Math.max.apply(null, precisions);
             if (!notNumber) {
-              sums[index] = values.reduce((prev, curr) => {
+              v[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                   return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
@@ -38881,10 +38854,13 @@
                 }
               }, 0);
             } else {
-              sums[index] = "";
+              v[index] = "";
             }
           });
         }
+        return v;
+      });
+      return () => {
         return vue.createVNode("div", {
           "class": "vc-table__footer",
           "cellspacing": "0",
@@ -38894,17 +38870,15 @@
           "class": "vc-table__tbody"
         }, [vue.createVNode("div", {
           "class": "vc-table__tr"
-        }, [states.columns.map((column, cellIndex) => vue.createVNode("div", {
-          "key": cellIndex,
-          "colspan": column.colSpan,
-          "rowspan": column.rowSpan,
-          "class": [getRowClasses(column, cellIndex), "vc-table__td"],
+        }, [states.columns.map((column, columnIndex) => vue.createVNode("div", {
+          "key": columnIndex,
+          "class": [getRowClasses(column, columnIndex), "vc-table__td"],
           "style": [{
             width: `${column.realWidth}px`
           }]
         }, [vue.createVNode("div", {
           "class": ["vc-table__cell", column.labelClass]
-        }, [sums[cellIndex]])]))])])]);
+        }, [sums.value[columnIndex]])]))])])]);
       };
     }
   });
@@ -38931,7 +38905,7 @@
       type: Number,
       default: 10
     },
-    rowKey: [String, Function],
+    primaryKey: [String, Function],
     // 是否显示表头
     showHeader: {
       type: Boolean,
@@ -39041,21 +39015,21 @@
       const rightFixedBody = vue.ref(null);
       const rightFixedFooterWrapper = vue.ref(null);
       const resizeProxy = vue.ref(null);
-      const isGroup = vue.ref(false);
       const scrollPosition = vue.ref("left");
       const hoverState = vue.ref(null);
       const isReady = vue.ref(false);
       const states = useStates({
         columns: "columns",
         leftFixedColumns: "leftFixedColumns",
-        rightFixedColumns: "rightFixedColumns"
+        rightFixedColumns: "rightFixedColumns",
+        isGroup: "isGroup"
       }, store);
       const classes = vue.computed(() => {
         return {
           "vc-table--fit": props2.fit,
           "vc-table--striped": props2.stripe,
-          "vc-table--border": props2.border || isGroup.value,
-          "vc-table--group": isGroup.value,
+          "vc-table--border": props2.border || states.isGroup,
+          "vc-table--group": states.isGroup,
           "vc-table--fluid-height": props2.maxHeight,
           "vc-table--scrollable-x": layout.states.scrollX,
           "vc-table--scrollable-y": layout.states.scrollY,
@@ -39299,7 +39273,7 @@
         immediate: true
       });
       vue.watch(() => props2.currentRowValue, (v) => {
-        if (!props2.rowKey) return;
+        if (!props2.primaryKey) return;
         store.current.reset(v);
       }, {
         immediate: true
@@ -39326,6 +39300,7 @@
       }, {
         immediate: true
       });
+      const tableId = getUid("table");
       vue.onMounted(() => {
         bindEvents();
         store.updateColumns();
@@ -39336,12 +39311,13 @@
         };
         isReady.value = true;
       });
-      vue.onBeforeUnmount(() => {
+      vue.onUnmounted(() => {
         isUnMount = true;
         unbindEvents();
       });
-      const tableId = getUid("table");
       expose({
+        bodyXWrapper,
+        bodyYWrapper,
         tableId,
         store,
         layout,
@@ -39510,22 +39486,19 @@
       order: ""
     },
     selection: {
-      width: 48,
-      minWidth: 48,
-      realWidth: 48,
+      width: 60,
+      minWidth: 60,
       order: "",
       className: "vc-table-column--selection"
     },
     expand: {
-      width: 48,
-      minWidth: 48,
-      realWidth: 48,
+      width: 60,
+      minWidth: 60,
       order: ""
     },
     index: {
-      width: 48,
-      minWidth: 48,
-      realWidth: 48,
+      width: 60,
+      minWidth: 60,
       order: ""
     }
   };
@@ -39685,8 +39658,8 @@
       customClass: String,
       labelClass: String,
       prop: String,
-      width: [Number, String],
-      minWidth: [Number, String],
+      width: Number,
+      minWidth: Number,
       renderHeader: Function,
       resizable: {
         type: Boolean,
@@ -39828,24 +39801,14 @@
         }
         return column;
       };
-      const refreshColumnBasicConfig = () => {
+      const registerColumn = () => {
         const defaults2 = {
           ...cellStarts[props2.type],
-          type: props2.type,
           id: columnId.value,
-          align: realAlign.value,
-          headerAlign: realHeaderAlign.value,
-          prop: props2.prop,
-          showPopover: props2.showPopover,
-          // index 列
-          index: props2.index
+          realAlign,
+          realHeaderAlign
         };
-        const basicProps = ["columnKey", "label", "customClass", "labelClass", "type", "renderHeader", "resizable", "formatter", "fixed", "resizable"];
-        const selectProps = ["selectable", "reserveSelection"];
-        const sortProps = ["sortable"];
-        const filterProps = ["filters", "filteredValue", "filterMultiple", "filter", "filterIcon", "filterPopupClass"];
-        let column = getPropsData(basicProps, selectProps, sortProps, filterProps);
-        column = merge$1(defaults2, column);
+        let column = merge$1(defaults2, getPropsData(Object.keys(props2)));
         column = compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
         for (const key in column) {
           if (hasOwn$1(column, key)) {
@@ -39853,11 +39816,14 @@
           }
         }
       };
-      const registerComplexWatchers = () => {
+      const registerWatchers = () => {
+        Object.keys(props2).forEach((k) => vue.watch(() => props2[k], (v) => columnConfig[k] = v));
         vue.watch(() => props2.fixed, () => {
           table.exposed.store.scheduleLayout(true);
         });
-        vue.watch(() => realWidth.value, () => {
+        vue.watch(() => realWidth.value, (v) => {
+          columnConfig["width"] = v;
+          columnConfig["realWidth"] = v;
           table.exposed.store.scheduleLayout(false);
         });
         vue.watch(() => realMinWidth.value, () => {
@@ -39865,10 +39831,9 @@
         });
       };
       vue.onBeforeMount(() => {
-        refreshColumnBasicConfig();
-        registerComplexWatchers();
+        registerColumn();
+        registerWatchers();
       });
-      vue.onUpdated(refreshColumnBasicConfig);
       vue.onMounted(() => {
         const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
         const columnIndex = [...children].indexOf(instance.vnode.el);
@@ -39888,7 +39853,8 @@
           const renderDefault = slots?.default?.({
             row: {},
             column: {},
-            $index: -1
+            columnIndex: -1,
+            rowIndex: -1
           });
           if (renderDefault instanceof Array) {
             for (const childNode of renderDefault) {