@deot/vc-components 1.0.11 → 1.0.12

package/dist/index.cjs

@@ -8008,6 +8008,7 @@ const Track = /* @__PURE__ */ vue.defineComponent({
       isVisible.value = cursorDown.value;
     };
     const refreshThumb = () => Utils.raf(() => {
+      if (!thumb.value) return;
       thumb.value.style[$__namespace.prefixStyle('transform').camel] = `translate${barOptions.value.axis}(${thumbMove.value}px)`;
     });
     const refreshThrottleThumb = lodashEs.throttle(refreshThumb, 10);
@@ -13168,6 +13169,7 @@ const RecycleList = /* @__PURE__ */ vue.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++) {
@@ -13348,6 +13350,7 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
 
     // 图片撑开时，会影响布局, 节流结束后调用
     const handleResize = Utils.throttle(async () => {
+      if (!wrapper.value) return;
       const isNeedRefreshLayout = rebuildData.value.some(i => !i.isPlaceholder);
       if (isNeedRefreshLayout) {
         const oldFirstItemIndex = firstItemIndex.value;
@@ -13785,88 +13788,65 @@ const MSwitch = /* @__PURE__ */ vue.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;
 };
@@ -13879,23 +13859,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) => {
@@ -13908,6 +13940,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 = vue.reactive({
@@ -13915,23 +13978,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: [],
@@ -13953,7 +14007,17 @@ class BaseWatcher {
     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(() => lodash.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)
   });
 }
 
@@ -13964,14 +14028,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);
@@ -13993,10 +14057,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) {
@@ -14006,11 +14070,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;
   }
@@ -14023,22 +14087,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;
@@ -14057,8 +14121,8 @@ let Tree$1 = class Tree {
    * { 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 || []);
   });
   /**
@@ -14066,7 +14130,7 @@ let Tree$1 = class Tree {
    * { 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 = {};
@@ -14075,7 +14139,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]) {
@@ -14095,16 +14159,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) {
@@ -14124,7 +14188,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) => {
@@ -14135,7 +14199,7 @@ let Tree$1 = class Tree {
           return source.level;
         }
       };
-      const id = getRowIdentity(item, rowKey);
+      const id = getRowValue(item, primaryKey);
       return traverse(treeData[id]);
     });
     return lodashEs.max(levels) || 0;
@@ -14197,10 +14261,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;
@@ -14213,10 +14277,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);
@@ -14225,9 +14289,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;
@@ -14242,7 +14306,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
@@ -14312,27 +14376,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);
-    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") {
@@ -14349,18 +14399,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 vue.nextTick(() => this.updateElsHeight());
     const table = this.table.exposed;
@@ -14383,13 +14421,12 @@ class Layout {
       this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
     }
     this.updateScrollY();
-    this.updateScroller();
   }
   updateColumnsWidth() {
     if (vcShared.IS_SERVER) 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) {
@@ -14415,7 +14452,7 @@ class Layout {
         }
       } else {
         this.states.scrollX = true;
-        flexColumns.forEach(function(column) {
+        flexColumns.forEach((column) => {
           column.realWidth = column.width || column.minWidth;
         });
       }
@@ -14449,12 +14486,6 @@ class Layout {
       });
       this.states.rightFixedWidth = rightFixedWidth;
     }
-    this.updateColumns();
-  }
-  // v2.x中的 notifyObservers
-  updateColumns() {
-  }
-  updateScroller() {
   }
 }
 
@@ -14464,7 +14495,7 @@ class Store extends BaseWatcher {
   expand;
   tree;
   layout;
-  flattenData = vue.computed(() => {
+  flatData = vue.computed(() => {
     if (this.table.props.expandSelectable) {
       return lodash.concat(
         flattenData(this.states.data, { parent: true, cascader: true }),
@@ -14522,7 +14553,7 @@ class Store extends BaseWatcher {
         this.cleanSelection();
       }
     } else {
-      this.checkRowKey();
+      this.checkPrimaryKey();
       this.updateSelectionByRowKey();
     }
     this.updateAllSelected();
@@ -14544,10 +14575,10 @@ class Store extends BaseWatcher {
     }
   }
   /**
-   * 检查 rowKey 是否存在
+   * 检查 primaryKey 是否存在
    */
-  checkRowKey() {
-    const { rowKey } = this.table.props;
+  checkPrimaryKey() {
+    const { primaryKey } = this.table.props;
   }
   /**
    * states
@@ -14608,22 +14639,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 = lodash.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 = lodash.concat(leftFixedLeafColumns, leafColumns, rightFixedLeafColumns);
-    states.isComplex = states.leftFixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    const originColumns = lodash.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) {
@@ -14647,13 +14676,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 (Utils.hasOwn(selectedMap, key) && !dataMap[key]) {
           deleted.push(selectedMap[key].row);
@@ -14661,7 +14690,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) => {
@@ -14722,7 +14751,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;
@@ -14753,11 +14782,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);
@@ -14773,7 +14802,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);
@@ -14888,6 +14917,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
         type
       }) => type === 'default')
     });
+    const wrapper = vue.ref();
     vue.watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
       if (!props.store.states.isComplex || vcShared.IS_SERVER) return;
       Utils.raf(() => {
@@ -14898,12 +14928,12 @@ const TableBody = /* @__PURE__ */ vue.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;
     };
@@ -14968,7 +14998,7 @@ const TableBody = /* @__PURE__ */ vue.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');
       }
@@ -15028,7 +15058,7 @@ const TableBody = /* @__PURE__ */ vue.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 = lodashEs.debounce(index => {
       props.store.setHoverRow(index);
@@ -15064,7 +15094,7 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
       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'],
@@ -15128,13 +15158,12 @@ const TableBody = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
-    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, {
@@ -15179,57 +15208,6 @@ const TableBody = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
   name: 'vc-table-header',
   props: {
@@ -15256,16 +15234,18 @@ const TableHeader = /* @__PURE__ */ vue.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') {
@@ -15274,6 +15254,9 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
         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
@@ -15314,8 +15297,8 @@ const TableHeader = /* @__PURE__ */ vue.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) {
@@ -15455,37 +15438,27 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
       });
     };
     return () => {
-      const {
-        originColumns
-      } = props.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": ['vc-table__cell',
@@ -15495,10 +15468,8 @@ const TableHeader = /* @__PURE__ */ vue.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 ? vue.createVNode(Icon, {
         "type": "o-info",
         "onMouseenter": e => handleCellMouseEnter(e, column)
@@ -15540,28 +15511,28 @@ const TableFooter = /* @__PURE__ */ vue.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 = 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) {
@@ -15569,17 +15540,17 @@ const TableFooter = /* @__PURE__ */ vue.defineComponent({
       }
       return classes;
     };
-    return () => {
-      let sums = [];
+    const sums = vue.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]));
@@ -15594,7 +15565,7 @@ const TableFooter = /* @__PURE__ */ vue.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)));
@@ -15603,10 +15574,13 @@ const TableFooter = /* @__PURE__ */ vue.defineComponent({
               }
             }, 0);
           } else {
-            sums[index] = '';
+            v[index] = '';
           }
         });
       }
+      return v;
+    });
+    return () => {
       return vue.createVNode("div", {
         "class": "vc-table__footer",
         "cellspacing": "0",
@@ -15616,17 +15590,15 @@ const TableFooter = /* @__PURE__ */ vue.defineComponent({
         "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]])]))])])]);
     };
   }
 });
@@ -15654,7 +15626,7 @@ const props$c = {
     type: Number,
     default: 10
   },
-  rowKey: [String, Function],
+  primaryKey: [String, Function],
   // 是否显示表头
   showHeader: {
     type: Boolean,
@@ -15771,23 +15743,21 @@ const Table = /* @__PURE__ */ vue.defineComponent({
     const rightFixedBody = vue.ref(null);
     const rightFixedFooterWrapper = vue.ref(null);
     const resizeProxy = vue.ref(null);
-
-    // 是否拥有多级表头, 由table-header控制
-    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': 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,
@@ -16048,7 +16018,7 @@ const Table = /* @__PURE__ */ vue.defineComponent({
       immediate: true
     });
     vue.watch(() => props.currentRowValue, v => {
-      if (!props.rowKey) return;
+      if (!props.primaryKey) return;
       store.current.reset(v);
     }, {
       immediate: true
@@ -16077,6 +16047,7 @@ const Table = /* @__PURE__ */ vue.defineComponent({
     }, {
       immediate: true
     });
+    const tableId = Utils.getUid('table');
     vue.onMounted(() => {
       bindEvents();
       store.updateColumns();
@@ -16087,12 +16058,13 @@ const Table = /* @__PURE__ */ vue.defineComponent({
       };
       isReady.value = true;
     });
-    vue.onBeforeUnmount(() => {
+    vue.onUnmounted(() => {
       isUnMount = true;
       unbindEvents();
     });
-    const tableId = Utils.getUid('table');
     expose({
+      bodyXWrapper,
+      bodyYWrapper,
       tableId,
       store,
       layout,
@@ -16262,22 +16234,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: ''
   }
 };
@@ -16444,8 +16413,8 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
     customClass: String,
     labelClass: String,
     prop: String,
-    width: [Number, String],
-    minWidth: [Number, String],
+    width: Number,
+    minWidth: Number,
     renderHeader: Function,
     resizable: {
       type: Boolean,
@@ -16517,7 +16486,6 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
       }, {});
       return result;
     };
-
     /**
      * compose 1
      * 对于特定类型的 column，某些属性不允许设置
@@ -16626,26 +16594,16 @@ const TableColumn = /* @__PURE__ */ vue.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 = lodashEs.merge(defaults, column);
-
-      // 注意 compose 中函数执行的顺序是从右到左
+      let column = lodashEs.merge(defaults, getPropsData(Object.keys(props)));
+
+      // minWidth/realWidth/renderHeader
       column = helperFp.compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
       for (const key in column) {
         if (Utils.hasOwn(column, key)) {
@@ -16653,11 +16611,17 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
-    const registerComplexWatchers = () => {
+    const registerWatchers = () => {
+      // 赋值
+      Object.keys(props).forEach(k => vue.watch(() => props[k], v => columnConfig[k] = v));
+
+      // 影响布局
       vue.watch(() => props.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, () => {
@@ -16665,10 +16629,9 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
       });
     };
     vue.onBeforeMount(() => {
-      refreshColumnBasicConfig();
-      registerComplexWatchers();
+      registerColumn();
+      registerWatchers();
     });
-    vue.onUpdated(refreshColumnBasicConfig);
     vue.onMounted(() => {
       const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
 
@@ -16696,7 +16659,8 @@ const TableColumn = /* @__PURE__ */ vue.defineComponent({
         const renderDefault = slots?.default?.({
           row: {},
           column: {},
-          $index: -1
+          columnIndex: -1,
+          rowIndex: -1
         });
         if (renderDefault instanceof Array) {
           for (const childNode of renderDefault) {