@deot/vc-components 1.0.11 → 1.0.12

package/dist/index.umd.cjs

@@ -13318,6 +13318,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);
@@ -20034,6 +20035,7 @@
 
 	    // 设置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++) {
@@ -20214,6 +20216,7 @@
 
 	    // 图片撑开时，会影响布局, 节流结束后调用
 	    const handleResize = throttle$1(async () => {
+	      if (!wrapper.value) return;
 	      const isNeedRefreshLayout = rebuildData.value.some(i => !i.isPlaceholder);
 	      if (isNeedRefreshLayout) {
 	        const oldFirstItemIndex = firstItemIndex.value;
@@ -20651,88 +20654,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;
 	};
@@ -20745,35 +20725,23 @@
 	  });
 	  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 flattenData = (data, opts = {}) => {
-	  const result = [];
-	  data.forEach((item) => {
-	    if (item.children) {
-	      const { children, ...rest } = item;
-	      opts.parent ? result.push(...[opts.cascader ? item : rest, ...flattenData(children, opts)]) : result.push(...flattenData(children));
-	    } else {
-	      result.push(item);
-	    }
-	  });
-	  return result;
-	};
 
 	var lodash$1 = {exports: {}};
 
@@ -37986,29 +37954,115 @@
 
 	var lodashExports = requireLodash();
 
+	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) => {
+	    if (item.children) {
+	      const { children, ...rest } = item;
+	      opts.parent ? result.push(...[opts.cascader ? item : rest, ...flattenData(children, opts)]) : result.push(...flattenData(children));
+	    } else {
+	      result.push(item);
+	    }
+	  });
+	  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: [],
@@ -38030,7 +38084,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)
 	  });
 	}
 
@@ -38041,14 +38105,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);
@@ -38070,10 +38134,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 info = keysMap[cur];
 	      if (info) {
@@ -38083,11 +38147,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;
 	  }
@@ -38100,22 +38164,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;
@@ -38134,8 +38198,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 || []);
 	  });
 	  /**
@@ -38143,7 +38207,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 = {};
@@ -38152,7 +38216,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]) {
@@ -38172,16 +38236,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) {
@@ -38201,7 +38265,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) => {
@@ -38212,7 +38276,7 @@
 	          return source.level;
 	        }
 	      };
-	      const id = getRowIdentity(item, rowKey);
+	      const id = getRowValue(item, primaryKey);
 	      return traverse(treeData[id]);
 	    });
 	    return max$2(levels) || 0;
@@ -38274,10 +38338,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;
@@ -38290,10 +38354,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);
@@ -38302,9 +38366,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;
@@ -38319,7 +38383,7 @@
 	        walkTreeNode(
 	          data,
 	          (parent, _, level) => {
-	            const id = getRowIdentity(parent, rowKey);
+	            const id = getRowValue(parent, primaryKey);
 	            Object.defineProperty(parent, "__KEY__", {
 	              value: `${level}__${id}`,
 	              writable: false
@@ -38389,27 +38453,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") {
@@ -38426,18 +38476,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;
@@ -38460,13 +38498,12 @@
 	      this.states.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
 	    }
 	    this.updateScrollY();
-	    this.updateScroller();
 	  }
 	  updateColumnsWidth() {
 	    if (IS_SERVER$2) 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) {
@@ -38492,7 +38529,7 @@
 	        }
 	      } else {
 	        this.states.scrollX = true;
-	        flexColumns.forEach(function(column) {
+	        flexColumns.forEach((column) => {
 	          column.realWidth = column.width || column.minWidth;
 	        });
 	      }
@@ -38526,12 +38563,6 @@
 	      });
 	      this.states.rightFixedWidth = rightFixedWidth;
 	    }
-	    this.updateColumns();
-	  }
-	  // v2.x中的 notifyObservers
-	  updateColumns() {
-	  }
-	  updateScroller() {
 	  }
 	}
 
@@ -38541,7 +38572,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 }),
@@ -38599,7 +38630,7 @@
 	        this.cleanSelection();
 	      }
 	    } else {
-	      this.checkRowKey();
+	      this.checkPrimaryKey();
 	      this.updateSelectionByRowKey();
 	    }
 	    this.updateAllSelected();
@@ -38621,10 +38652,10 @@
 	    }
 	  }
 	  /**
-	   * 检查 rowKey 是否存在
+	   * 检查 primaryKey 是否存在
 	   */
-	  checkRowKey() {
-	    const { rowKey } = this.table.props;
+	  checkPrimaryKey() {
+	    const { primaryKey } = this.table.props;
 	  }
 	  /**
 	   * states
@@ -38685,22 +38716,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) {
@@ -38724,13 +38753,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);
@@ -38738,7 +38767,7 @@
 	      }
 	    } else {
 	      deleted = selection.filter((item) => {
-	        return !this.flattenData.value.includes(item);
+	        return !this.flatData.value.includes(item);
 	      });
 	    }
 	    deleted.forEach((deletedItem) => {
@@ -38799,7 +38828,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;
@@ -38830,11 +38859,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);
@@ -38850,7 +38879,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);
@@ -38965,6 +38994,7 @@
 	        type
 	      }) => type === 'default')
 	    });
+	    const wrapper = vue.ref();
 	    vue.watch(() => props.store.states.hoverRowIndex, (v, oldV) => {
 	      if (!props.store.states.isComplex || IS_SERVER$2) return;
 	      raf(() => {
@@ -38975,12 +39005,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;
 	    };
@@ -39045,7 +39075,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');
 	      }
@@ -39105,7 +39135,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 => {
 	      props.store.setHoverRow(index);
@@ -39141,7 +39171,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'],
@@ -39205,13 +39235,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, {
@@ -39256,57 +39285,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: {
@@ -39333,16 +39311,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 (props.fixed === true || props.fixed === 'left') {
 	        return after >= states.leftFixedLeafCount;
 	      } else if (props.fixed === 'right') {
@@ -39351,6 +39331,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
@@ -39391,8 +39374,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) {
@@ -39532,37 +39515,27 @@
 	      });
 	    };
 	    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',
@@ -39572,10 +39545,8 @@
 	        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)
@@ -39617,28 +39588,28 @@
 	      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) {
@@ -39646,17 +39617,17 @@
 	      }
 	      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]));
@@ -39671,7 +39642,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)));
@@ -39680,10 +39651,13 @@
 	              }
 	            }, 0);
 	          } else {
-	            sums[index] = '';
+	            v[index] = '';
 	          }
 	        });
 	      }
+	      return v;
+	    });
+	    return () => {
 	      return vue.createVNode("div", {
 	        "class": "vc-table__footer",
 	        "cellspacing": "0",
@@ -39693,17 +39667,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]])]))])])]);
 	    };
 	  }
 	});
@@ -39731,7 +39703,7 @@
 	    type: Number,
 	    default: 10
 	  },
-	  rowKey: [String, Function],
+	  primaryKey: [String, Function],
 	  // 是否显示表头
 	  showHeader: {
 	    type: Boolean,
@@ -39848,23 +39820,21 @@
 	    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,
@@ -40125,7 +40095,7 @@
 	      immediate: true
 	    });
 	    vue.watch(() => props.currentRowValue, v => {
-	      if (!props.rowKey) return;
+	      if (!props.primaryKey) return;
 	      store.current.reset(v);
 	    }, {
 	      immediate: true
@@ -40154,6 +40124,7 @@
 	    }, {
 	      immediate: true
 	    });
+	    const tableId = getUid('table');
 	    vue.onMounted(() => {
 	      bindEvents();
 	      store.updateColumns();
@@ -40164,12 +40135,13 @@
 	      };
 	      isReady.value = true;
 	    });
-	    vue.onBeforeUnmount(() => {
+	    vue.onUnmounted(() => {
 	      isUnMount = true;
 	      unbindEvents();
 	    });
-	    const tableId = getUid('table');
 	    expose({
+	      bodyXWrapper,
+	      bodyYWrapper,
 	      tableId,
 	      store,
 	      layout,
@@ -40339,22 +40311,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: ''
 	  }
 	};
@@ -40521,8 +40490,8 @@
 	    customClass: String,
 	    labelClass: String,
 	    prop: String,
-	    width: [Number, String],
-	    minWidth: [Number, String],
+	    width: Number,
+	    minWidth: Number,
 	    renderHeader: Function,
 	    resizable: {
 	      type: Boolean,
@@ -40594,7 +40563,6 @@
 	      }, {});
 	      return result;
 	    };
-
 	    /**
 	     * compose 1
 	     * 对于特定类型的 column，某些属性不允许设置
@@ -40703,26 +40671,16 @@
 	      }
 	      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$1(column, key)) {
@@ -40730,11 +40688,17 @@
 	        }
 	      }
 	    };
-	    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, () => {
@@ -40742,10 +40706,9 @@
 	      });
 	    };
 	    vue.onBeforeMount(() => {
-	      refreshColumnBasicConfig();
-	      registerComplexWatchers();
+	      registerColumn();
+	      registerWatchers();
 	    });
-	    vue.onUpdated(refreshColumnBasicConfig);
 	    vue.onMounted(() => {
 	      const children = isSubColumn ? parent.vnode.el.children : parent.exposed.hiddenColumns.value.children;
 
@@ -40773,7 +40736,8 @@
 	        const renderDefault = slots?.default?.({
 	          row: {},
 	          column: {},
-	          $index: -1
+	          columnIndex: -1,
+	          rowIndex: -1
 	        });
 	        if (renderDefault instanceof Array) {
 	          for (const childNode of renderDefault) {