@deot/vc-components 1.0.11 → 1.0.12

package/dist/index.js

@@ -7986,6 +7986,7 @@ const Track = /* @__PURE__ */ defineComponent({
       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(refreshThumb, 10);
@@ -13146,6 +13147,7 @@ const RecycleList = /* @__PURE__ */ defineComponent({
 
     // 设置data首个元素的在originalData索引值
     const setFirstItemIndex = () => {
+      if (!wrapper.value) return;
       const position = wrapper.value[K.scrollAxis];
       let item;
       for (let i = 0; i < rebuildData.value.length; i++) {
@@ -13326,6 +13328,7 @@ const RecycleList = /* @__PURE__ */ defineComponent({
 
     // 图片撑开时，会影响布局, 节流结束后调用
     const handleResize = throttle$1(async () => {
+      if (!wrapper.value) return;
       const isNeedRefreshLayout = rebuildData.value.some(i => !i.isPlaceholder);
       if (isNeedRefreshLayout) {
         const oldFirstItemIndex = firstItemIndex.value;
@@ -13763,88 +13766,65 @@ const MSwitch = /* @__PURE__ */ defineComponent({
   }
 });
 
-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;
 };
@@ -13857,23 +13837,75 @@ const getColumnById = (columns, columnId) => {
   });
   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 = (event) => {
-  let cell = event.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) => {
@@ -13886,6 +13918,37 @@ const flattenData = (data, opts = {}) => {
   });
   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 = reactive({
@@ -13893,23 +13956,14 @@ class BaseWatcher {
     _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: [],
@@ -13931,7 +13985,17 @@ class BaseWatcher {
     treeLazyData: [],
     // 源数据展开
     treeLazyColumnIdentifier: "hasChildren",
-    treeChildrenColumnName: "children"
+    treeChildrenColumnName: "children",
+    // compputeds
+    isComplex: computed(() => this.states.leftFixedColumns.length > 0 || this.states.rightFixedColumns.length > 0),
+    isGroup: computed(() => this.states.columns.length > this.states.originColumns.length),
+    columns: computed(() => concat(this.states.leftFixedLeafColumns, this.states.leafColumns, this.states.rightFixedLeafColumns)),
+    leafColumns: computed(() => flattenData(this.states.notFixedColumns)),
+    leftFixedLeafColumns: computed(() => flattenData(this.states.leftFixedColumns)),
+    rightFixedLeafColumns: computed(() => flattenData(this.states.rightFixedColumns)),
+    leafColumnsLength: computed(() => this.states.leafColumns.length),
+    leftFixedLeafColumnsLength: computed(() => this.states.leftFixedLeafColumns.length),
+    rightFixedLeafColumnsLength: computed(() => this.states.rightFixedLeafColumns.length)
   });
 }
 
@@ -13942,14 +14006,14 @@ class Expand {
   }
   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);
@@ -13971,10 +14035,10 @@ class Expand {
   }
   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 info = keysMap[cur];
       if (info) {
@@ -13984,11 +14048,11 @@ class Expand {
     }, []);
   }
   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;
   }
@@ -14001,22 +14065,22 @@ class Current {
   }
   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;
@@ -14035,8 +14099,8 @@ let Tree$1 = class Tree {
    * { id: { level, children } }
    */
   normalizedData = 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 || []);
   });
   /**
@@ -14044,7 +14108,7 @@ let Tree$1 = class Tree {
    * { id: { children } }
    */
   normalizedLazyNode = 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 = {};
@@ -14053,7 +14117,7 @@ let Tree$1 = class Tree {
       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]) {
@@ -14073,16 +14137,16 @@ let Tree$1 = class Tree {
     );
   }
   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) {
@@ -14102,7 +14166,7 @@ let Tree$1 = class Tree {
   }
   // 获取当前展开最大的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) => {
@@ -14113,7 +14177,7 @@ let Tree$1 = class Tree {
           return source.level;
         }
       };
-      const id = getRowIdentity(item, rowKey);
+      const id = getRowValue(item, primaryKey);
       return traverse(treeData[id]);
     });
     return max(levels) || 0;
@@ -14175,10 +14239,10 @@ let Tree$1 = class Tree {
     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;
@@ -14191,10 +14255,10 @@ let Tree$1 = class Tree {
     }
   }
   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);
@@ -14203,9 +14267,9 @@ let Tree$1 = class Tree {
     }
   }
   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;
@@ -14220,7 +14284,7 @@ let Tree$1 = class Tree {
         walkTreeNode(
           data,
           (parent, _, level) => {
-            const id = getRowIdentity(parent, rowKey);
+            const id = getRowValue(parent, primaryKey);
             Object.defineProperty(parent, "__KEY__", {
               value: `${level}__${id}`,
               writable: false
@@ -14290,27 +14354,13 @@ class Layout {
     if (!this.store) {
       throw new VcError("table", "Table Layout 必须包含store实例");
     }
-    this.updateScroller = this.updateScroller.bind(this);
-    this.updateColumns = this.updateColumns.bind(this);
-    onMounted(() => {
-      this.updateColumns();
-      this.updateScroller();
-    });
-    let __updated__;
-    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") {
@@ -14327,18 +14377,6 @@ class Layout {
   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 nextTick(() => this.updateElsHeight());
     const table = this.table.exposed;
@@ -14361,13 +14399,12 @@ class Layout {
       this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
     }
     this.updateScrollY();
-    this.updateScroller();
   }
   updateColumnsWidth() {
     if (IS_SERVER$1) 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) {
@@ -14393,7 +14430,7 @@ class Layout {
         }
       } else {
         this.states.scrollX = true;
-        flexColumns.forEach(function(column) {
+        flexColumns.forEach((column) => {
           column.realWidth = column.width || column.minWidth;
         });
       }
@@ -14427,12 +14464,6 @@ class Layout {
       });
       this.states.rightFixedWidth = rightFixedWidth;
     }
-    this.updateColumns();
-  }
-  // v2.x中的 notifyObservers
-  updateColumns() {
-  }
-  updateScroller() {
   }
 }
 
@@ -14442,7 +14473,7 @@ class Store extends BaseWatcher {
   expand;
   tree;
   layout;
-  flattenData = computed(() => {
+  flatData = computed(() => {
     if (this.table.props.expandSelectable) {
       return concat(
         flattenData(this.states.data, { parent: true, cascader: true }),
@@ -14500,7 +14531,7 @@ class Store extends BaseWatcher {
         this.cleanSelection();
       }
     } else {
-      this.checkRowKey();
+      this.checkPrimaryKey();
       this.updateSelectionByRowKey();
     }
     this.updateAllSelected();
@@ -14522,10 +14553,10 @@ class Store extends BaseWatcher {
     }
   }
   /**
-   * 检查 rowKey 是否存在
+   * 检查 primaryKey 是否存在
    */
-  checkRowKey() {
-    const { rowKey } = this.table.props;
+  checkPrimaryKey() {
+    const { primaryKey } = this.table.props;
   }
   /**
    * states
@@ -14586,22 +14617,20 @@ class Store extends BaseWatcher {
   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 = 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 = concat(leftFixedLeafColumns, leafColumns, rightFixedLeafColumns);
-    states.isComplex = states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    const originColumns = 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) {
@@ -14625,13 +14654,13 @@ class Store extends BaseWatcher {
    * 清理选择
    */
   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(selectedMap, key) && !dataMap[key]) {
           deleted.push(selectedMap[key].row);
@@ -14639,7 +14668,7 @@ class Store extends BaseWatcher {
       }
     } else {
       deleted = selection.filter((item) => {
-        return !this.flattenData.value.includes(item);
+        return !this.flatData.value.includes(item);
       });
     }
     deleted.forEach((deletedItem) => {
@@ -14700,7 +14729,7 @@ class Store extends BaseWatcher {
     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;
@@ -14731,11 +14760,11 @@ class Store extends BaseWatcher {
     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);
@@ -14751,7 +14780,7 @@ class Store extends BaseWatcher {
     }
     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);
@@ -14866,6 +14895,7 @@ const TableBody = /* @__PURE__ */ defineComponent({
         type
       }) => type === 'default')
     });
+    const wrapper = ref();
     watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
       if (!props.store.states.isComplex || IS_SERVER$1) return;
       raf(() => {
@@ -14876,12 +14906,12 @@ const TableBody = /* @__PURE__ */ defineComponent({
         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;
     };
@@ -14946,7 +14976,7 @@ const TableBody = /* @__PURE__ */ defineComponent({
       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');
       }
@@ -15006,7 +15036,7 @@ const TableBody = /* @__PURE__ */ defineComponent({
       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(index => {
       props.store.setHoverRow(index);
@@ -15042,7 +15072,7 @@ const TableBody = /* @__PURE__ */ defineComponent({
       const {
         columns
       } = states;
-      const key = getKeyOfRow(row, rowIndex);
+      const key = getValueOfRow(row, rowIndex);
       return createVNode("div", {
         "key": key,
         "class": [getRowClass(row, rowIndex), 'vc-table__tr'],
@@ -15106,13 +15136,12 @@ const TableBody = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const wrapper = ref();
     expose({
       wrapper,
       getRootElement: () => instance.vnode.el
     });
+    const layout = table.exposed.layout;
     return () => {
-      const layout = table.exposed.layout;
       return createVNode("div", {
         "class": "vc-table__body"
       }, [table.props.height ? createVNode(RecycleList, {
@@ -15157,57 +15186,6 @@ const TableBody = /* @__PURE__ */ defineComponent({
 
 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__ */ defineComponent({
   name: 'vc-table-header',
   props: {
@@ -15234,16 +15212,18 @@ const TableHeader = /* @__PURE__ */ defineComponent({
       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 (props.fixed === true || props.fixed === 'left') {
         return after >= states.leftFixedLeafCount;
       } else if (props.fixed === 'right') {
@@ -15252,6 +15232,9 @@ const TableHeader = /* @__PURE__ */ defineComponent({
         return after < states.leftFixedLeafCount || start >= states.columnsCount - states.rightFixedLeafCount;
       }
     };
+    const columnsHidden = computed(() => {
+      return states.columns.map((_, index) => isColumnHidden(index));
+    });
     const getHeaderRowStyle = rowIndex => {
       const {
         headerRowStyle
@@ -15292,8 +15275,8 @@ const TableHeader = /* @__PURE__ */ defineComponent({
       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) {
@@ -15433,37 +15416,27 @@ const TableHeader = /* @__PURE__ */ defineComponent({
       });
     };
     return () => {
-      const {
-        originColumns
-      } = props.store.states;
-      const columnRows = convertToRows(originColumns);
-
-      // 是否拥有多级表头
-      const isGroup = columnRows.length > 1;
-      if (isGroup) table.exposed.isGroup.value = true;
       return createVNode("div", {
         "class": "vc-table__header"
       }, [createVNode("div", {
         "class": [{
-          'is-group': isGroup
+          'is-group': states.isGroup
         }, 'vc-table__thead']
       }, [
       // renderList
-      columnRows.map((columns, rowIndex) => createVNode("div", {
+      states.headerRows.map((columns, rowIndex) => createVNode("div", {
         "style": getHeaderRowStyle(rowIndex),
         "class": [getHeaderRowClass(rowIndex), 'vc-table__tr']
-      }, [columns.map((column, cellIndex) => createVNode("div", {
-        "colspan": column.colSpan,
-        "rowspan": column.rowSpan,
-        "onMousemove": $event => handleMouseMove($event, column),
+      }, [columns.map((column, columnIndex) => 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
       }, [createVNode("div", {
         "class": ['vc-table__cell',
@@ -15473,10 +15446,8 @@ const TableHeader = /* @__PURE__ */ defineComponent({
         column.labelClass]
       }, [column.renderHeader ? column.renderHeader({
         column,
-        $index: cellIndex,
-        // index: cellIndex,
-        store: props.store,
-        _self: instance
+        columnIndex,
+        store: props.store
       }) : column.label, column.tooltip ? createVNode(Icon, {
         "type": "o-info",
         "onMouseenter": e => handleCellMouseEnter(e, column)
@@ -15518,28 +15489,28 @@ const TableFooter = /* @__PURE__ */ defineComponent({
       leftFixedCount: $states => $states.leftFixedColumns.length,
       rightFixedCount: $states => $states.rightFixedColumns.length
     });
-    const isCellHidden = (index, columns, column) => {
+    const isColumnHidden = (column, index) => {
       if (props.fixed === true || props.fixed === 'left') {
         return index >= states.leftFixedLeafCount;
       } else if (props.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 (!props.fixed && column.fixed) {
-        // hide cell when footer instance is not fixed and column is fixed
         return true;
       } else {
         return index < states.leftFixedCount || index >= states.columnsCount - states.rightFixedCount;
       }
     };
-    const getRowClasses = (column, cellIndex) => {
-      const classes = [column.id, column.align, column.labelClass];
+    const columnsHidden = 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) {
@@ -15547,17 +15518,17 @@ const TableFooter = /* @__PURE__ */ defineComponent({
       }
       return classes;
     };
-    return () => {
-      let sums = [];
+    const sums = computed(() => {
+      let v = [];
       if (props.getSummary) {
-        sums = props.getSummary({
+        v = props.getSummary({
           columns: states.columns,
           data: states.data
         });
       } else {
         states.columns.forEach((column, index) => {
           if (index === 0) {
-            sums[index] = props.sumText;
+            v[index] = props.sumText;
             return;
           }
           const values = states.data.map(item => Number(item[column.prop]));
@@ -15572,7 +15543,7 @@ const TableFooter = /* @__PURE__ */ defineComponent({
           });
           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)));
@@ -15581,10 +15552,13 @@ const TableFooter = /* @__PURE__ */ defineComponent({
               }
             }, 0);
           } else {
-            sums[index] = '';
+            v[index] = '';
           }
         });
       }
+      return v;
+    });
+    return () => {
       return createVNode("div", {
         "class": "vc-table__footer",
         "cellspacing": "0",
@@ -15594,17 +15568,15 @@ const TableFooter = /* @__PURE__ */ defineComponent({
         "class": "vc-table__tbody"
       }, [createVNode("div", {
         "class": "vc-table__tr"
-      }, [states.columns.map((column, cellIndex) => createVNode("div", {
-        "key": cellIndex,
-        "colspan": column.colSpan,
-        "rowspan": column.rowSpan,
-        "class": [getRowClasses(column, cellIndex), 'vc-table__td'],
+      }, [states.columns.map((column, columnIndex) => createVNode("div", {
+        "key": columnIndex,
+        "class": [getRowClasses(column, columnIndex), 'vc-table__td'],
         "style": [{
           width: `${column.realWidth}px`
         }]
       }, [createVNode("div", {
         "class": ['vc-table__cell', column.labelClass]
-      }, [sums[cellIndex]])]))])])]);
+      }, [sums.value[columnIndex]])]))])])]);
     };
   }
 });
@@ -15632,7 +15604,7 @@ const props$c = {
     type: Number,
     default: 10
   },
-  rowKey: [String, Function],
+  primaryKey: [String, Function],
   // 是否显示表头
   showHeader: {
     type: Boolean,
@@ -15749,23 +15721,21 @@ const Table = /* @__PURE__ */ defineComponent({
     const rightFixedBody = ref(null);
     const rightFixedFooterWrapper = ref(null);
     const resizeProxy = ref(null);
-
-    // 是否拥有多级表头, 由table-header控制
-    const isGroup = ref(false);
     const scrollPosition = ref('left');
     const hoverState = ref(null);
     const isReady = ref(false);
     const states = useStates({
       columns: 'columns',
       leftFixedColumns: 'leftFixedColumns',
-      rightFixedColumns: 'rightFixedColumns'
+      rightFixedColumns: 'rightFixedColumns',
+      isGroup: 'isGroup'
     }, store);
     const classes = computed(() => {
       return {
         'vc-table--fit': props.fit,
         'vc-table--striped': props.stripe,
-        'vc-table--border': props.border || isGroup.value,
-        'vc-table--group': isGroup.value,
+        'vc-table--border': props.border || states.isGroup,
+        'vc-table--group': states.isGroup,
         'vc-table--fluid-height': props.maxHeight,
         'vc-table--scrollable-x': layout.states.scrollX,
         'vc-table--scrollable-y': layout.states.scrollY,
@@ -16026,7 +15996,7 @@ const Table = /* @__PURE__ */ defineComponent({
       immediate: true
     });
     watch(() => props.currentRowValue, v => {
-      if (!props.rowKey) return;
+      if (!props.primaryKey) return;
       store.current.reset(v);
     }, {
       immediate: true
@@ -16055,6 +16025,7 @@ const Table = /* @__PURE__ */ defineComponent({
     }, {
       immediate: true
     });
+    const tableId = getUid('table');
     onMounted(() => {
       bindEvents();
       store.updateColumns();
@@ -16065,12 +16036,13 @@ const Table = /* @__PURE__ */ defineComponent({
       };
       isReady.value = true;
     });
-    onBeforeUnmount(() => {
+    onUnmounted(() => {
       isUnMount = true;
       unbindEvents();
     });
-    const tableId = getUid('table');
     expose({
+      bodyXWrapper,
+      bodyYWrapper,
       tableId,
       store,
       layout,
@@ -16240,22 +16212,19 @@ const cellStarts = {
     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: ''
   }
 };
@@ -16422,8 +16391,8 @@ const TableColumn = /* @__PURE__ */ defineComponent({
     customClass: String,
     labelClass: String,
     prop: String,
-    width: [Number, String],
-    minWidth: [Number, String],
+    width: Number,
+    minWidth: Number,
     renderHeader: Function,
     resizable: {
       type: Boolean,
@@ -16495,7 +16464,6 @@ const TableColumn = /* @__PURE__ */ defineComponent({
       }, {});
       return result;
     };
-
     /**
      * compose 1
      * 对于特定类型的 column，某些属性不允许设置
@@ -16604,26 +16572,16 @@ const TableColumn = /* @__PURE__ */ defineComponent({
       }
       return column;
     };
-    const refreshColumnBasicConfig = () => {
+    const registerColumn = () => {
       const defaults = {
         ...cellStarts[props.type],
-        type: props.type,
         id: columnId.value,
-        align: realAlign.value,
-        headerAlign: realHeaderAlign.value,
-        prop: props.prop,
-        showPopover: props.showPopover,
-        // index 列
-        index: props.index
+        realAlign,
+        realHeaderAlign
       };
-      const basicProps = ['columnKey', 'label', 'customClass', 'labelClass', 'type', 'renderHeader', 'resizable', 'formatter', 'fixed', 'resizable']; // eslint-disable-line
-      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(defaults, column);
-
-      // 注意 compose 中函数执行的顺序是从右到左
+      let column = merge$1(defaults, getPropsData(Object.keys(props)));
+
+      // minWidth/realWidth/renderHeader
       column = compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
       for (const key in column) {
         if (hasOwn(column, key)) {
@@ -16631,11 +16589,17 @@ const TableColumn = /* @__PURE__ */ defineComponent({
         }
       }
     };
-    const registerComplexWatchers = () => {
+    const registerWatchers = () => {
+      // 赋值
+      Object.keys(props).forEach(k => watch(() => props[k], v => columnConfig[k] = v));
+
+      // 影响布局
       watch(() => props.fixed, () => {
         table.exposed.store.scheduleLayout(true);
       });
-      watch(() => realWidth.value, () => {
+      watch(() => realWidth.value, v => {
+        columnConfig['width'] = v;
+        columnConfig['realWidth'] = v;
         table.exposed.store.scheduleLayout(false);
       });
       watch(() => realMinWidth.value, () => {
@@ -16643,10 +16607,9 @@ const TableColumn = /* @__PURE__ */ defineComponent({
       });
     };
     onBeforeMount(() => {
-      refreshColumnBasicConfig();
-      registerComplexWatchers();
+      registerColumn();
+      registerWatchers();
     });
-    onUpdated(refreshColumnBasicConfig);
     onMounted(() => {
       const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
 
@@ -16674,7 +16637,8 @@ const TableColumn = /* @__PURE__ */ defineComponent({
         const renderDefault = slots?.default?.({
           row: {},
           column: {},
-          $index: -1
+          columnIndex: -1,
+          rowIndex: -1
         });
         if (renderDefault instanceof Array) {
           for (const childNode of renderDefault) {