vue-devui 1.0.0-rc.10 → 1.0.0-rc.13

package/table/index.es.js

@@ -33,10 +33,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { computed, ref, watch, unref, defineComponent, inject, createVNode, toRefs, onMounted, onUnmounted, Transition, mergeProps, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, provide, Teleport, vShow, resolveDynamicComponent, render, resolveDirective, toRef, reactive, createTextVNode, onBeforeUnmount, isVNode, getCurrentInstance, onBeforeMount } from "vue";
+import { computed, ref, watchEffect, watch, getCurrentInstance, unref, defineComponent, inject, createVNode, mergeProps, toRefs, onMounted, onUnmounted, Transition, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, provide, Teleport, vShow, resolveDynamicComponent, render, resolveDirective, toRef, reactive, createTextVNode, onBeforeUnmount, isVNode, onBeforeMount, onUpdated } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
-const TableProps = {
+const tableProps = {
   data: {
     type: Array,
     default: []
@@ -111,10 +111,19 @@ const TableProps = {
     default: true
   },
   rowKey: {
-    type: String
+    type: [Function, String],
+    default: "id"
   },
-  trackBy: {
-    type: Function
+  defaultExpandAll: {
+    type: Boolean,
+    default: false
+  },
+  expandRowKeys: {
+    type: Array
+  },
+  indent: {
+    type: Number,
+    default: 16
   }
 };
 const TABLE_TOKEN = Symbol();
@@ -159,18 +168,18 @@ function useTable(props, tableWidth) {
   }));
   return { classes, styles };
 }
-const useFixedColumn = (column) => {
+const useFixedColumn = (column2) => {
   const ns2 = useNamespace("table");
   const stickyClass = computed(() => ({
-    [ns2.e("checkable-cell")]: column.value.type === "checkable",
-    [ns2.m("sticky-cell")]: Boolean(column.value.fixedLeft) || Boolean(column.value.fixedRight),
-    left: Boolean(column.value.fixedLeft),
-    right: Boolean(column.value.fixedRight),
-    [`is-${column.value.align}`]: true
+    [ns2.e("checkable-cell")]: column2.value.type === "checkable",
+    [ns2.m("sticky-cell")]: Boolean(column2.value.fixedLeft) || Boolean(column2.value.fixedRight),
+    left: Boolean(column2.value.fixedLeft),
+    right: Boolean(column2.value.fixedRight),
+    [`is-${column2.value.align}`]: true
   }));
   const stickyStyle = computed(() => ({
-    left: column.value.fixedLeft,
-    right: column.value.fixedRight
+    left: column2.value.fixedLeft,
+    right: column2.value.fixedRight
   }));
   return { stickyClass, stickyStyle };
 };
@@ -184,15 +193,15 @@ function useTableLayout(table2) {
     }
     const flatColumns = table2.store.states.flatColumns;
     const columnMap = {};
-    flatColumns.value.forEach((column) => {
-      columnMap[column.id] = column;
+    flatColumns.value.forEach((column2) => {
+      columnMap[column2.id] = column2;
     });
     for (let i = 0, len = cols.length; i < len; i++) {
       const col = cols[i];
       const columnId = col.getAttribute("column-id");
-      const column = columnMap[columnId];
-      if (column) {
-        col.setAttribute("width", column.realWidth);
+      const column2 = columnMap[columnId];
+      if (column2) {
+        col.setAttribute("width", column2.realWidth);
       }
     }
   };
@@ -201,39 +210,39 @@ function useTableLayout(table2) {
     const tableClientWidth = (_b = (_a = table2 == null ? void 0 : table2.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.clientWidth;
     let tableMinWidth = 0;
     const flatColumns = table2.store.states.flatColumns;
-    const flexColumns = flatColumns.value.filter((column) => typeof column.width !== "number");
+    const flexColumns = flatColumns.value.filter((column2) => typeof column2.width !== "number");
     if (flexColumns.length) {
-      flatColumns.value.forEach((column) => {
-        tableMinWidth += Number(column.width || 80);
+      flatColumns.value.forEach((column2) => {
+        tableMinWidth += Number(column2.width || 80);
       });
       if (tableMinWidth <= tableClientWidth) {
         const totalFlexWidth = tableClientWidth - tableMinWidth;
         if (flexColumns.length === 1) {
           flexColumns[0].realWidth = Number(flexColumns[0].width || 80) + totalFlexWidth;
         } else {
-          const allFlexColumnWidth = flexColumns.reduce((pre, column) => pre + Number(column.width || 80), 0);
+          const allFlexColumnWidth = flexColumns.reduce((pre, column2) => pre + Number(column2.width || 80), 0);
           const flexWidthPercent = totalFlexWidth / allFlexColumnWidth;
           let exceptFistWidth = 0;
-          flexColumns.forEach((column, index2) => {
+          flexColumns.forEach((column2, index2) => {
             if (index2 === 0) {
               return;
             }
-            const perFlexWidth = Math.floor(Number(column.width || 80) * flexWidthPercent);
+            const perFlexWidth = Math.floor(Number(column2.width || 80) * flexWidthPercent);
             exceptFistWidth += perFlexWidth;
-            column.realWidth = Number(column.width || 80) + perFlexWidth;
+            column2.realWidth = Number(column2.width || 80) + perFlexWidth;
           });
           flexColumns[0].realWidth = Number(flexColumns[0].width || 80) + totalFlexWidth - exceptFistWidth;
         }
       } else {
-        flexColumns.forEach((column) => {
-          column.realWidth = Number(column.width || 80);
+        flexColumns.forEach((column2) => {
+          column2.realWidth = Number(column2.width || 80);
         });
       }
       tableWidth.value = Math.max(tableMinWidth, tableClientWidth);
     } else {
-      flatColumns.value.forEach((column) => {
-        column.realWidth = column.width || 80;
-        tableMinWidth += Number(column.realWidth);
+      flatColumns.value.forEach((column2) => {
+        column2.realWidth = column2.width || 80;
+        tableMinWidth += Number(column2.realWidth);
       });
       tableWidth.value = tableMinWidth;
     }
@@ -241,29 +250,234 @@ function useTableLayout(table2) {
   };
   return { tableWidth, updateColumnWidth };
 }
-function replaceColumn(array4, column) {
+function useTableWatcher(props, store) {
+  watchEffect(() => {
+    if (props.expandRowKeys) {
+      store.setExpandRows(props.expandRowKeys);
+    }
+  });
+  watch(() => props.data, () => {
+    store.updateRows();
+  }, { deep: true });
+}
+const inBrowser = typeof window !== "undefined";
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+const isBoolean = (value) => typeof value === "boolean";
+const isString = (value) => typeof value === "string";
+const isFunction = (value) => Object.prototype.toString.call(value) === "[object Function]";
+function formatWidth(width) {
+  if (width === "") {
+    return width;
+  }
+  if (typeof width === "number") {
+    return width;
+  }
+  return parseInt(width, 10) || 80;
+}
+function getRowIdentity(row, rowKey, index2) {
+  if (isFunction(rowKey)) {
+    return rowKey(row, index2);
+  } else if (isString(rowKey)) {
+    const paths = rowKey.split(".");
+    let obj = row;
+    for (const p of paths) {
+      obj = obj[p];
+    }
+    return `${obj}`;
+  }
+  return "";
+}
+function getRowKeysMap(data, rowKey) {
+  const rowKeyMap = {};
+  (data || []).forEach((row, index2) => {
+    rowKeyMap[getRowIdentity(row, rowKey)] = { row, index: index2 };
+  });
+  return rowKeyMap;
+}
+function toggleRowExpandStatus(rowsArr, row, status) {
+  let isChanged = false;
+  const index2 = rowsArr.indexOf(row);
+  const isIncluded = index2 !== -1;
+  const addRow = () => {
+    rowsArr.push(row);
+    isChanged = true;
+  };
+  const deleteRow = () => {
+    rowsArr.splice(index2, 1);
+    isChanged = true;
+  };
+  if (isBoolean(status)) {
+    if (status && !isIncluded) {
+      addRow();
+    } else if (!status && isIncluded) {
+      deleteRow();
+    }
+  } else {
+    if (isIncluded) {
+      deleteRow();
+    } else {
+      addRow();
+    }
+  }
+  return isChanged;
+}
+function toggleRowVisible(expand, table2, key) {
+  const rowLevelMap = (table2 == null ? void 0 : table2.store.states.rowLevelMap.value) || {};
+  const levelKeys = Object.keys(rowLevelMap);
+  const hiddenRowKeys = table2 == null ? void 0 : table2.store.states.hiddenRowKeys;
+  let start = false;
+  for (let index2 = 0; index2 < levelKeys.length; index2++) {
+    if (levelKeys[index2] === key) {
+      start = true;
+      index2++;
+    }
+    if (start && rowLevelMap[levelKeys[index2]] !== rowLevelMap[key] + 1) {
+      break;
+    }
+    if (start && rowLevelMap[levelKeys[index2]] === rowLevelMap[key] + 1) {
+      if (expand) {
+        hiddenRowKeys.value = hiddenRowKeys.value.filter((rowKey) => rowKey !== levelKeys[index2]);
+      } else {
+        if (!hiddenRowKeys.value.includes(levelKeys[index2])) {
+          hiddenRowKeys.value.push(levelKeys[index2]);
+        }
+      }
+    }
+  }
+}
+function useExpand(dataSource, table2) {
+  const tableInstance = getCurrentInstance();
+  const rowKey = tableInstance.props.rowKey || "";
+  const defaultExpandAll = ref(tableInstance.props.defaultExpandAll);
+  const _expandedRows = ref([]);
+  const updateExpandRows = () => {
+    if (defaultExpandAll.value) {
+      _expandedRows.value = dataSource.value.slice();
+    } else {
+      _expandedRows.value = [];
+    }
+  };
+  const setExpandRows = (rowKeys) => {
+    const data = dataSource.value || [];
+    const rowKeysMap = getRowKeysMap(data, rowKey);
+    _expandedRows.value = rowKeys.reduce((pre, cur) => {
+      const currentRow = rowKeysMap[cur];
+      if (currentRow) {
+        pre.push(currentRow.row);
+      }
+      return pre;
+    }, []);
+  };
+  const isRowExpanded = (row) => {
+    return _expandedRows.value.includes(row);
+  };
+  const doToggleRowVisible = (expand, row) => {
+    var _a;
+    if ((_a = row.children) == null ? void 0 : _a.length) {
+      const key = getRowIdentity(row, rowKey);
+      if (expand && isRowExpanded(row)) {
+        toggleRowVisible(true, table2, key);
+      }
+      if (!expand) {
+        toggleRowVisible(false, table2, key);
+      }
+      row.children.forEach((child) => {
+        doToggleRowVisible(expand, child);
+      });
+    }
+  };
+  const toggleRowExpansion = (row, expanded) => {
+    const isChanged = toggleRowExpandStatus(_expandedRows.value, row, expanded);
+    if (isChanged) {
+      tableInstance.emit("expand-change", row, _expandedRows.value.slice());
+    }
+    if (!table2.store.states.flatColumns.value.some((column2) => column2.type === "expand")) {
+      doToggleRowVisible(isRowExpanded(row), row);
+    }
+  };
+  return {
+    isRowExpanded,
+    updateExpandRows,
+    setExpandRows,
+    toggleRowExpansion
+  };
+}
+function useEditTableCell() {
+  const tableInstance = getCurrentInstance();
+  const rowKey = tableInstance.props.rowKey || "";
+  const tableCellModeMap = ref(/* @__PURE__ */ new Map());
+  const setCellMode = (row, rowIndex, fields, cellMode) => {
+    if (Array.isArray(fields)) {
+      fields.forEach((item) => {
+        const cellKey = `${getRowIdentity(row, rowKey, rowIndex)}-${item}-cell`;
+        tableCellModeMap.value.set(cellKey, cellMode);
+      });
+    } else {
+      const cellKey = `${getRowIdentity(row, rowKey, rowIndex)}-${fields}-cell`;
+      tableCellModeMap.value.set(cellKey, cellMode);
+    }
+  };
+  const resetCellMode = () => {
+    for (const item of tableCellModeMap.value.keys()) {
+      tableCellModeMap.value.set(item, "readonly");
+    }
+  };
+  return {
+    tableCellModeMap,
+    setCellMode,
+    resetCellMode
+  };
+}
+function replaceColumn(array4, column2) {
   return array4.map((item) => {
     var _a;
-    if (item.id === column.id) {
-      return column;
+    if (item.id === column2.id) {
+      return column2;
     } else if ((_a = item.children) == null ? void 0 : _a.length) {
-      item.children = replaceColumn(item.children, column);
+      item.children = replaceColumn(item.children, column2);
     }
     return item;
   });
 }
 function doFlattenColumns(columns) {
   const result = [];
-  columns.forEach((column) => {
-    if (column.children) {
-      result.push.apply(result, doFlattenColumns(column.children));
+  columns.forEach((column2) => {
+    if (column2.children) {
+      result.push.apply(result, doFlattenColumns(column2.children));
     } else {
-      result.push(column);
+      result.push(column2);
     }
   });
   return result;
 }
-const createColumnGenerator = () => {
+function createColumnGenerator() {
   const _columns = ref([]);
   const flatColumns = ref([]);
   const sortColumn = () => {
@@ -272,24 +486,25 @@ const createColumnGenerator = () => {
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   };
-  const insertColumn = (column, parent) => {
+  const insertColumn = (column2, parent) => {
+    var _a;
     const array4 = unref(_columns);
     let newColumns = [];
     if (!parent) {
-      array4.push(column);
+      array4.push(column2);
       newColumns = array4;
     } else {
       if (parent && !parent.children) {
         parent.children = [];
       }
-      parent.children.push(column);
+      (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.push(column2);
       newColumns = replaceColumn(array4, parent);
     }
     sortColumn();
     _columns.value = newColumns;
   };
-  const removeColumn = (column) => {
-    const i = _columns.value.findIndex((v) => v === column);
+  const removeColumn = (column2) => {
+    const i = _columns.value.findIndex((v) => v === column2);
     if (i === -1) {
       return;
     }
@@ -298,30 +513,100 @@ const createColumnGenerator = () => {
   const updateColumns = () => {
     flatColumns.value = [].concat(doFlattenColumns(_columns.value));
   };
-  return { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns };
-};
-const createSelection = (dataSource, trackBy) => {
+  return {
+    _columns,
+    flatColumns,
+    insertColumn,
+    removeColumn,
+    sortColumn,
+    updateColumns
+  };
+}
+function doFlattenRows(dataList, level, rowKey, rowLevelMap, hiddenRowKeys) {
+  const result = [];
+  dataList.forEach((data) => {
+    result.push(data);
+    if (level > 0) {
+      const key = getRowIdentity(data, rowKey);
+      rowLevelMap.value[key] = level;
+      hiddenRowKeys.value.push(key);
+    }
+    if (data.children) {
+      rowLevelMap.value[getRowIdentity(data, rowKey)] = level;
+      result.push.apply(result, doFlattenRows(data.children, level + 1, rowKey, rowLevelMap, hiddenRowKeys));
+    }
+  });
+  return result;
+}
+function createRowGenerator(dataSource, rowKey, flatColumns) {
+  const flatRows = ref([]);
+  const hiddenRowKeys = ref([]);
+  const rowLevelMap = ref({});
+  const firstDefaultColumn = ref("");
+  const updateRows = () => {
+    const hasExpand = flatColumns.value.some((column2) => column2.type === "expand");
+    const result = hasExpand ? dataSource.value : doFlattenRows(dataSource.value, 0, rowKey, rowLevelMap, hiddenRowKeys);
+    flatRows.value = [].concat(result);
+  };
+  const updateFirstDefaultColumn = () => {
+    const index2 = flatColumns.value.findIndex((column2) => column2.type === "");
+    firstDefaultColumn.value = index2 !== -1 ? flatColumns.value[index2].id : "";
+  };
+  return {
+    flatRows,
+    hiddenRowKeys,
+    rowLevelMap,
+    updateRows,
+    firstDefaultColumn,
+    updateFirstDefaultColumn
+  };
+}
+function createSelection(dataSource, rowKey, flatRows) {
   const _checkSet = ref(/* @__PURE__ */ new Set());
-  const checkRow = (toggle, row) => {
+  const checkRow = (toggle, row, index2) => {
+    const key = getRowIdentity(row, rowKey, index2);
     if (toggle) {
-      _checkSet.value.add(trackBy(row));
+      _checkSet.value.add(key);
     } else {
-      _checkSet.value.delete(trackBy(row));
+      _checkSet.value.delete(key);
     }
   };
-  const isRowChecked = (row) => {
-    return _checkSet.value.has(trackBy(row));
+  const toggleRowSelection = (row, checked, index2) => {
+    const key = getRowIdentity(row, rowKey, index2);
+    const isIncluded = _checkSet.value.has(key);
+    const addRow = () => {
+      _checkSet.value.add(key);
+    };
+    const deleteRow = () => {
+      _checkSet.value.delete(key);
+    };
+    if (isBoolean(checked)) {
+      if (checked && !isIncluded) {
+        addRow();
+      } else if (!checked && isIncluded) {
+        deleteRow();
+      }
+    } else {
+      if (isIncluded) {
+        deleteRow();
+      } else {
+        addRow();
+      }
+    }
+  };
+  const isRowChecked = (row, index2) => {
+    return _checkSet.value.has(getRowIdentity(row, rowKey, index2));
   };
   const getCheckedRows = () => {
-    return dataSource.value.filter((item) => isRowChecked(item));
+    return flatRows.value.filter((item, index2) => isRowChecked(item, index2));
   };
   const _checkAllRecord = ref(false);
   const _checkAll = computed({
     get: () => _checkAllRecord.value,
     set: (val) => {
       _checkAllRecord.value = val;
-      dataSource.value.forEach((item) => {
-        checkRow(val, item);
+      dataSource.value.forEach((item, index2) => {
+        checkRow(val, item, index2);
       });
     }
   });
@@ -332,9 +617,9 @@ const createSelection = (dataSource, trackBy) => {
     }
     let allTrue = true;
     let allFalse = true;
-    const items = dataSource.value;
+    const items = flatRows.value;
     for (let i = 0; i < items.length; i++) {
-      const checked = isRowChecked(items[i]);
+      const checked = isRowChecked(items[i], i);
       allTrue && (allTrue = checked);
       allFalse && (allFalse = !checked);
     }
@@ -342,7 +627,7 @@ const createSelection = (dataSource, trackBy) => {
     _halfChecked.value = !(allFalse || allTrue);
   }, { immediate: true, deep: true });
   watch(dataSource, (value) => {
-    _checkAllRecord.value = value.findIndex((item) => !isRowChecked(item)) === -1;
+    _checkAllRecord.value = value.findIndex((item, index2) => !isRowChecked(item, index2)) === -1;
   });
   return {
     _checkSet,
@@ -350,10 +635,11 @@ const createSelection = (dataSource, trackBy) => {
     _halfChecked,
     getCheckedRows,
     checkRow,
-    isRowChecked
+    isRowChecked,
+    toggleRowSelection
   };
-};
-const createSorter = (dataSource, _data) => {
+}
+function createSorter(dataSource, _data) {
   const sortData = (direction, sortMethod) => {
     if (direction === "ASC") {
       _data.value = _data.value.sort((a, b) => sortMethod ? sortMethod(a, b) ? 1 : -1 : 0);
@@ -365,92 +651,33 @@ const createSorter = (dataSource, _data) => {
   };
   const thList = [];
   return { sortData, thList };
-};
-const createFixedLogic = (columns) => {
+}
+function createFixedLogic(columns) {
   const isFixedLeft = computed(() => {
     return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
   });
   return { isFixedLeft };
-};
-const createExpandRow = (dataSource, trackBy) => {
-  const _expandedRows = ref(/* @__PURE__ */ new Set());
-  const isRowExpanded = (row) => {
-    return _expandedRows.value.has(trackBy(row));
-  };
-  const expandRow = (row) => {
-    _expandedRows.value.add(trackBy(row));
-  };
-  const collapseRow = (row) => {
-    _expandedRows.value.delete(trackBy(row));
-  };
-  const toggleRow = (row) => {
-    if (isRowExpanded(row)) {
-      collapseRow(row);
-    } else {
-      expandRow(row);
-    }
-  };
-  const getExpandedRows = () => {
-    return dataSource.value.filter((item) => isRowExpanded(item));
-  };
-  const expandAllRows = () => {
-    dataSource.value.forEach((item) => {
-      expandRow(item);
-    });
-  };
-  const collapseAllRows = () => {
-    dataSource.value.forEach((item) => {
-      collapseRow(item);
-    });
-  };
-  return {
-    _expandedRows,
-    toggleRow,
-    expandRow,
-    collapseRow,
-    isRowExpanded,
-    getExpandedRows,
-    expandAllRows,
-    collapseAllRows
-  };
-};
+}
 function createStore(dataSource, table2) {
   const _data = ref([]);
+  const { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns } = createColumnGenerator();
+  const { flatRows, hiddenRowKeys, rowLevelMap, updateRows, firstDefaultColumn, updateFirstDefaultColumn } = createRowGenerator(dataSource, table2.props.rowKey, flatColumns);
+  const { _checkAll, _checkSet, _halfChecked, getCheckedRows, isRowChecked, checkRow, toggleRowSelection } = createSelection(_data, table2.props.rowKey, flatRows);
+  const { sortData, thList } = createSorter(dataSource, flatRows);
+  const { isFixedLeft } = createFixedLogic(_columns);
+  const { isRowExpanded, updateExpandRows, setExpandRows, toggleRowExpansion } = useExpand(_data, table2);
+  const { tableCellModeMap, setCellMode, resetCellMode } = useEditTableCell();
   watch(dataSource, (value) => {
     _data.value = [...value];
+    updateExpandRows();
   }, { deep: true, immediate: true });
-  const {
-    _columns,
-    flatColumns,
-    insertColumn,
-    removeColumn,
-    sortColumn,
-    updateColumns
-  } = createColumnGenerator();
-  const {
-    _checkAll,
-    _checkSet,
-    _halfChecked,
-    getCheckedRows,
-    isRowChecked,
-    checkRow
-  } = createSelection(_data, table2.props.trackBy);
-  const { sortData, thList } = createSorter(dataSource, _data);
-  const { isFixedLeft } = createFixedLogic(_columns);
-  const {
-    _expandedRows,
-    toggleRow,
-    expandRow,
-    collapseRow,
-    isRowExpanded,
-    getExpandedRows,
-    expandAllRows,
-    collapseAllRows
-  } = createExpandRow(dataSource, table2.props.trackBy);
   return {
     _table: table2,
     states: {
       _data,
+      flatRows,
+      hiddenRowKeys,
+      rowLevelMap,
       _columns,
       flatColumns,
       _checkSet,
@@ -458,23 +685,25 @@ function createStore(dataSource, table2) {
       _halfChecked,
       isFixedLeft,
       thList,
-      _expandedRows
+      firstDefaultColumn,
+      tableCellModeMap
     },
     insertColumn,
     sortColumn,
     removeColumn,
     updateColumns,
+    updateRows,
     getCheckedRows,
     sortData,
     isRowChecked,
     checkRow,
-    toggleRow,
-    expandRow,
-    collapseRow,
     isRowExpanded,
-    getExpandedRows,
-    expandAllRows,
-    collapseAllRows
+    setExpandRows,
+    toggleRowExpansion,
+    toggleRowSelection,
+    updateFirstDefaultColumn,
+    setCellMode,
+    resetCellMode
   };
 }
 var ColGroup = defineComponent({
@@ -483,11 +712,11 @@ var ColGroup = defineComponent({
     const parent = inject(TABLE_TOKEN);
     const columns = parent == null ? void 0 : parent.store.states.flatColumns;
     const isFixed = computed(() => (parent == null ? void 0 : parent.props.tableLayout) === "fixed");
-    return () => createVNode("colgroup", null, [columns == null ? void 0 : columns.value.map((column, index2) => {
+    return () => createVNode("colgroup", null, [columns == null ? void 0 : columns.value.map((column2, index2) => {
       return createVNode("col", {
         "key": index2,
-        "column-id": isFixed.value ? column.id : "",
-        "width": column.type === "expand" ? 60 : isFixed.value ? column.realWidth : column.width || ""
+        "column-id": isFixed.value ? column2.id : "",
+        "width": column2.type === "expand" ? 60 : isFixed.value ? column2.realWidth : column2.width || ""
       }, null);
     })]);
   }
@@ -499,6 +728,9 @@ const sortProps = {
   }
 };
 var sort = "";
+const XLINK_HREF = {
+  "xlink:href": "#sort-svg-path-1"
+};
 var Sort = defineComponent({
   props: sortProps,
   emits: ["sort"],
@@ -557,10 +789,9 @@ var Sort = defineComponent({
       "stroke-width": "1",
       "fill": "none",
       "fill-rule": "evenodd"
-    }, [createVNode("use", {
-      "fill-rule": "evenodd",
-      "xlink:href": "#sort-svg-path-1"
-    }, null), createVNode("polygon", {
+    }, [createVNode("use", mergeProps({
+      "fill-rule": "evenodd"
+    }, XLINK_HREF), null), createVNode("polygon", {
       "points": "8 4 11 7 5 7"
     }, null), createVNode("polygon", {
       "points": "8 12 5 9 11 9"
@@ -623,15 +854,6 @@ const dropdownProps = {
   }
 };
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
-function getElement(element) {
-  if (element instanceof Element) {
-    return element;
-  }
-  if (element && typeof element === "object" && element.$el instanceof Element) {
-    return element.$el;
-  }
-  return null;
-}
 const dropdownMap = /* @__PURE__ */ new Map();
 function subscribeEvent(dom, type4, callback) {
   dom == null ? void 0 : dom.addEventListener(type4, callback);
@@ -639,7 +861,14 @@ function subscribeEvent(dom, type4, callback) {
     dom == null ? void 0 : dom.removeEventListener(type4, callback);
   };
 }
-const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
+const useDropdownEvent = ({
+  id,
+  isOpen,
+  origin,
+  dropdownRef,
+  props,
+  emit
+}) => {
   let overlayEnter = false;
   let originEnter = false;
   const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
@@ -797,25 +1026,6 @@ const fixedOverlayProps = {
     default: true
   }
 };
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
-}
 function useFixedOverlay(props, ctx) {
   let lockScrollCb;
   const onClick = (event) => {
@@ -1031,11 +1241,10 @@ const FlexibleOverlay = defineComponent({
     };
   }
 });
-const inBrowser = typeof window !== "undefined";
 const isObject = (val) => val !== null && typeof val === "object";
-const ns$1 = useNamespace("popper-trigger");
+const ns$3 = useNamespace("popper-trigger");
 function wrapContent(content) {
-  return h("span", { class: ns$1.b() }, content);
+  return h("span", { class: ns$3.b() }, content);
 }
 function getFirstValidChild(nodes) {
   for (const child of nodes) {
@@ -1381,7 +1590,8 @@ function useIconDom(props, ctx) {
       "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
       "style": {
         width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
       }
     }, ctx.attrs), null);
   };
@@ -1417,6 +1627,7 @@ function useIconDom(props, ctx) {
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
+  emits: ["click"],
   setup(props, ctx) {
     const {
       disabled,
@@ -1433,9 +1644,9 @@ var Icon = defineComponent({
     }));
     const onClick = (e) => {
       if (disabled.value) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
+        return;
       }
+      ctx.emit("click", e);
     };
     return () => {
       var _a, _b, _c, _d;
@@ -2780,7 +2991,7 @@ var lodash = { exports: {} };
       function baseAt(object4, paths) {
         var index2 = -1, length = paths.length, result2 = Array2(length), skip = object4 == null;
         while (++index2 < length) {
-          result2[index2] = skip ? undefined$1 : get(object4, paths[index2]);
+          result2[index2] = skip ? undefined$1 : get2(object4, paths[index2]);
         }
         return result2;
       }
@@ -2990,7 +3201,7 @@ var lodash = { exports: {} };
       }
       function baseFunctions(object4, props) {
         return arrayFilter(props, function(key) {
-          return isFunction(object4[key]);
+          return isFunction2(object4[key]);
         });
       }
       function baseGet(object4, path) {
@@ -3153,7 +3364,7 @@ var lodash = { exports: {} };
         if (!isObject2(value) || isMasked(value)) {
           return false;
         }
-        var pattern4 = isFunction(value) ? reIsNative : reIsHostCtor;
+        var pattern4 = isFunction2(value) ? reIsNative : reIsHostCtor;
         return pattern4.test(toSource(value));
       }
       function baseIsRegExp(value) {
@@ -3225,7 +3436,7 @@ var lodash = { exports: {} };
           return matchesStrictComparable(toKey(path), srcValue);
         }
         return function(object4) {
-          var objValue = get(object4, path);
+          var objValue = get2(object4, path);
           return objValue === undefined$1 && objValue === srcValue ? hasIn(object4, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
         };
       }
@@ -3275,7 +3486,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject2(objValue) || isFunction(objValue)) {
+            } else if (!isObject2(objValue) || isFunction2(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -4577,7 +4788,7 @@ var lodash = { exports: {} };
       function isMasked(func) {
         return !!maskSrcKey && maskSrcKey in func;
       }
-      var isMaskable = coreJsData ? isFunction : stubFalse;
+      var isMaskable = coreJsData ? isFunction2 : stubFalse;
       function isPrototype(value) {
         var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto;
         return value === proto;
@@ -5301,7 +5512,7 @@ var lodash = { exports: {} };
         if (fromIndex < 0) {
           fromIndex = nativeMax(length + fromIndex, 0);
         }
-        return isString(collection) ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1 : !!length && baseIndexOf(collection, value, fromIndex) > -1;
+        return isString2(collection) ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1 : !!length && baseIndexOf(collection, value, fromIndex) > -1;
       }
       var invokeMap = baseRest(function(collection, path, args) {
         var index2 = -1, isFunc = typeof path == "function", result2 = isArrayLike(collection) ? Array2(collection.length) : [];
@@ -5369,7 +5580,7 @@ var lodash = { exports: {} };
           return 0;
         }
         if (isArrayLike(collection)) {
-          return isString(collection) ? stringSize(collection) : collection.length;
+          return isString2(collection) ? stringSize(collection) : collection.length;
         }
         var tag = getTag(collection);
         if (tag == mapTag || tag == setTag) {
@@ -5690,12 +5901,12 @@ var lodash = { exports: {} };
       var isArray = Array2.isArray;
       var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer;
       function isArrayLike(value) {
-        return value != null && isLength(value.length) && !isFunction(value);
+        return value != null && isLength(value.length) && !isFunction2(value);
       }
       function isArrayLikeObject(value) {
         return isObjectLike(value) && isArrayLike(value);
       }
-      function isBoolean(value) {
+      function isBoolean2(value) {
         return value === true || value === false || isObjectLike(value) && baseGetTag(value) == boolTag;
       }
       var isBuffer = nativeIsBuffer || stubFalse;
@@ -5742,7 +5953,7 @@ var lodash = { exports: {} };
       function isFinite(value) {
         return typeof value == "number" && nativeIsFinite(value);
       }
-      function isFunction(value) {
+      function isFunction2(value) {
         if (!isObject2(value)) {
           return false;
         }
@@ -5804,7 +6015,7 @@ var lodash = { exports: {} };
         return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER;
       }
       var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
-      function isString(value) {
+      function isString2(value) {
         return typeof value == "string" || !isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag;
       }
       function isSymbol(value) {
@@ -5829,7 +6040,7 @@ var lodash = { exports: {} };
           return [];
         }
         if (isArrayLike(value)) {
-          return isString(value) ? stringToArray(value) : copyArray(value);
+          return isString2(value) ? stringToArray(value) : copyArray(value);
         }
         if (symIterator && value[symIterator]) {
           return iteratorToArray(value[symIterator]());
@@ -5958,7 +6169,7 @@ var lodash = { exports: {} };
       function functionsIn(object4) {
         return object4 == null ? [] : baseFunctions(object4, keysIn(object4));
       }
-      function get(object4, path, defaultValue) {
+      function get2(object4, path, defaultValue) {
         var result2 = object4 == null ? undefined$1 : baseGet(object4, path);
         return result2 === undefined$1 ? defaultValue : result2;
       }
@@ -6065,7 +6276,7 @@ var lodash = { exports: {} };
             index2 = length;
             value = defaultValue;
           }
-          object4 = isFunction(value) ? value.call(object4) : value;
+          object4 = isFunction2(value) ? value.call(object4) : value;
         }
         return object4;
       }
@@ -6086,7 +6297,7 @@ var lodash = { exports: {} };
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
           } else if (isObject2(object4)) {
-            accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object4)) : {};
+            accumulator = isFunction2(Ctor) ? baseCreate(getPrototype(object4)) : {};
           } else {
             accumulator = {};
           }
@@ -6503,7 +6714,7 @@ var lodash = { exports: {} };
           object4 = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object4);
+        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction2(object4);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object4[methodName] = func;
@@ -6813,7 +7024,7 @@ var lodash = { exports: {} };
       lodash2.forInRight = forInRight;
       lodash2.forOwn = forOwn;
       lodash2.forOwnRight = forOwnRight;
-      lodash2.get = get;
+      lodash2.get = get2;
       lodash2.gt = gt;
       lodash2.gte = gte;
       lodash2.has = has;
@@ -6829,7 +7040,7 @@ var lodash = { exports: {} };
       lodash2.isArrayBuffer = isArrayBuffer;
       lodash2.isArrayLike = isArrayLike;
       lodash2.isArrayLikeObject = isArrayLikeObject;
-      lodash2.isBoolean = isBoolean;
+      lodash2.isBoolean = isBoolean2;
       lodash2.isBuffer = isBuffer;
       lodash2.isDate = isDate;
       lodash2.isElement = isElement;
@@ -6838,7 +7049,7 @@ var lodash = { exports: {} };
       lodash2.isEqualWith = isEqualWith;
       lodash2.isError = isError;
       lodash2.isFinite = isFinite;
-      lodash2.isFunction = isFunction;
+      lodash2.isFunction = isFunction2;
       lodash2.isInteger = isInteger;
       lodash2.isLength = isLength;
       lodash2.isMap = isMap;
@@ -6855,7 +7066,7 @@ var lodash = { exports: {} };
       lodash2.isRegExp = isRegExp;
       lodash2.isSafeInteger = isSafeInteger;
       lodash2.isSet = isSet;
-      lodash2.isString = isString;
+      lodash2.isString = isString2;
       lodash2.isSymbol = isSymbol;
       lodash2.isTypedArray = isTypedArray;
       lodash2.isUndefined = isUndefined;
@@ -7645,10 +7856,10 @@ function usePopoverEvent(props, visible, origin) {
   });
   return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-const ns = useNamespace("popover");
+const ns$2 = useNamespace("popover");
 function SuccessIcon$1() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "success")],
+    "class": [ns$2.e("icon"), ns$2.em("icon", "success")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -7672,7 +7883,7 @@ function SuccessIcon$1() {
 }
 function WarningIcon() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "warning")],
+    "class": [ns$2.e("icon"), ns$2.em("icon", "warning")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -7689,7 +7900,7 @@ function WarningIcon() {
 }
 function InfoIcon() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "info")],
+    "class": [ns$2.e("icon"), ns$2.em("icon", "info")],
     "viewBox": "0 0 16 16",
     "version": "1.1",
     "xmlns": "http://www.w3.org/2000/svg"
@@ -7710,7 +7921,7 @@ function InfoIcon() {
 }
 function ErrorIcon$1() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "error")],
+    "class": [ns$2.e("icon"), ns$2.em("icon", "error")],
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
@@ -9025,6 +9236,16 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
+function getFieldValue(obj, path) {
+  return {
+    get value() {
+      return lodash.exports.get(obj, path);
+    },
+    set value(val) {
+      lodash.exports.set(obj, path, val);
+    }
+  };
+}
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
   const ns2 = useNamespace("form");
@@ -9063,17 +9284,12 @@ function useFormItemValidate(props, _rules) {
   const computedField = computed(() => {
     return typeof props.field === "string" ? props.field : "";
   });
-  const fieldValue = computed({
-    get: () => {
-      const formData = formContext.data;
-      if (!formData || !props.field) {
-        return;
-      }
-      return formData[props.field];
-    },
-    set: (val) => {
-      formContext.data[props.field] = val;
+  const fieldValue = computed(() => {
+    const formData = formContext.data;
+    if (!formData || !props.field) {
+      return;
     }
+    return getFieldValue(formData, props.field).value;
   });
   const getRuleByTrigger = (triggerVal) => {
     return _rules.value.filter((rule) => {
@@ -9086,7 +9302,7 @@ function useFormItemValidate(props, _rules) {
         return rule.trigger === triggerVal;
       }
     }).map((_a) => {
-      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      var rule = __objRest(_a, []);
       return rule;
     });
   };
@@ -9142,13 +9358,16 @@ function useFormItemValidate(props, _rules) {
     if (!formContext.data || !props.field) {
       return;
     }
-    isResetting = true;
-    fieldValue.value = initFieldValue;
+    const currentValue = getFieldValue(formContext.data, props.field);
+    if (!lodash.exports.isEqual(currentValue.value, initFieldValue)) {
+      isResetting = true;
+    }
+    currentValue.value = initFieldValue;
     await nextTick();
     clearValidate();
   };
   onMounted(() => {
-    initFieldValue = lodash.exports.cloneDeep(formContext.data[props.field]);
+    initFieldValue = lodash.exports.clone(fieldValue.value);
   });
   return { validateState, validateMessage, validate, resetField, clearValidate };
 }
@@ -9683,6 +9902,27 @@ function useFilterSingle(ctx) {
   };
   return { selectedItem, handleSelect };
 }
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object4, path) {
+  const keys = path.split(".");
+  let result = object4;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    const messages2 = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
+function _isSlot$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var MultipleFilter = defineComponent({
   props: {
     filterList: {
@@ -9692,37 +9932,42 @@ var MultipleFilter = defineComponent({
   },
   emits: ["confirm"],
   setup(props, ctx) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTable", app);
     const {
       _checkList,
       _checkAll,
       _halfChecked,
       handleConfirm
     } = useFilterMultiple(props.filterList, ctx);
-    return () => createVNode(Fragment, null, [createVNode("div", {
-      "class": "filter-all-check"
-    }, [createVNode("div", {
-      "class": "filter-item"
-    }, [createVNode(Checkbox, {
-      "modelValue": _checkAll.value,
-      "onUpdate:modelValue": ($event) => _checkAll.value = $event,
-      "halfChecked": _halfChecked.value,
-      "label": "\u5168\u9009"
-    }, null)])]), createVNode("div", {
-      "class": "filter-multiple-menu"
-    }, [_checkList.value.map((item) => createVNode("div", {
-      "class": "filter-item"
-    }, [createVNode(Checkbox, {
-      "modelValue": item.checked,
-      "onUpdate:modelValue": ($event) => item.checked = $event,
-      "label": item.name
-    }, null)]))]), createVNode("div", {
-      "class": "filter-operation"
-    }, [createVNode(Button, {
-      "variant": "text",
-      "onClick": handleConfirm
-    }, {
-      default: () => [createTextVNode("\u786E\u5B9A")]
-    })])]);
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": "filter-all-check"
+      }, [createVNode("div", {
+        "class": "filter-item"
+      }, [createVNode(Checkbox, {
+        "modelValue": _checkAll.value,
+        "onUpdate:modelValue": ($event) => _checkAll.value = $event,
+        "halfChecked": _halfChecked.value,
+        "label": t("selectAll")
+      }, null)])]), createVNode("div", {
+        "class": "filter-multiple-menu"
+      }, [_checkList.value.map((item) => createVNode("div", {
+        "class": "filter-item"
+      }, [createVNode(Checkbox, {
+        "modelValue": item.checked,
+        "onUpdate:modelValue": ($event) => item.checked = $event,
+        "label": item.name
+      }, null)]))]), createVNode("div", {
+        "class": "filter-operation"
+      }, [createVNode(Button, {
+        "variant": "text",
+        "onClick": handleConfirm
+      }, _isSlot$1(_slot = t("ok")) ? _slot : {
+        default: () => [_slot]
+      })])]);
+    };
   }
 });
 var list = "";
@@ -9842,17 +10087,17 @@ var Filter = defineComponent({
     });
   }
 });
-function useBaseRender(column) {
+function useBaseRender(column2) {
   const baseClass = computed(() => ({
-    operable: column.value.filterable || column.value.sortable || column.value.resizeable,
-    resizeable: column.value.resizeable
+    operable: column2.value.filterable || column2.value.sortable || column2.value.resizeable,
+    resizeable: column2.value.resizeable
   }));
   return { baseClass };
 }
-function useSort(column) {
+function useSort(column2) {
   const table2 = inject(TABLE_TOKEN);
   const store = table2.store;
-  const direction = ref(column.value.sortDirection);
+  const direction = ref(column2.value.sortDirection);
   const sortClass = computed(() => ({
     "sort-active": Boolean(direction.value)
   }));
@@ -9860,7 +10105,7 @@ function useSort(column) {
   thInstance && store.states.thList.push(thInstance);
   onMounted(() => {
     var _a;
-    column.value.sortable && column.value.sortDirection && ((_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column.value.sortMethod));
+    column2.value.sortable && column2.value.sortDirection && ((_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column2.value.sortMethod));
   });
   const execClearSortOrder = () => {
     store.states.thList.forEach((th) => {
@@ -9874,22 +10119,23 @@ function useSort(column) {
     var _a;
     direction.value = val;
     execClearSortOrder();
-    (_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column.value.sortMethod);
-    table2.emit("sort-change", { field: column.value.field, direction: direction.value });
+    (_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column2.value.sortMethod);
+    table2.emit("sort-change", { field: column2.value.field, direction: direction.value });
   };
   const clearSortOrder = () => {
     direction.value = "";
   };
   return { direction, sortClass, handleSort, clearSortOrder };
 }
-function useFilter(column) {
+function useFilter(column2) {
   const filter2 = ref(null);
   const filterClass = computed(() => ({
     "filter-active": Boolean(filter2.value || Array.isArray(filter2.value) && filter2.value.length)
   }));
   const handleFilter = (val) => {
+    var _a;
     filter2.value = val;
-    column.value.ctx.emit("filter-change", val);
+    (_a = column2.value.ctx) == null ? void 0 : _a.emit("filter-change", val);
   };
   return { filterClass, handleFilter };
 }
@@ -9910,7 +10156,7 @@ function getFinalWidth(newWidth, minWidth, maxWidth) {
   const finalWidth = !overMinWidth ? realMinWidth : !underMaxWidth ? realMaxWidth : newWidth;
   return finalWidth;
 }
-function useDragColumnWidth(elementRef, column) {
+function useDragColumnWidth(elementRef, column2) {
   let initialWidth = 0;
   let mouseDownScreenX = 0;
   let resizeBarElement;
@@ -9919,33 +10165,36 @@ function useDragColumnWidth(elementRef, column) {
   const resizing = ref(false);
   const tableElement = table2.tableRef;
   const onMousemove = (e) => {
+    var _a;
     const movementX = e.clientX - mouseDownScreenX;
     const newWidth = initialWidth + movementX;
-    const finalWidth = getFinalWidth(newWidth, column.value.minWidth, column.value.maxWidth);
+    const finalWidth = getFinalWidth(newWidth, column2.value.minWidth, column2.value.maxWidth);
     if (resizeBarElement) {
       resizeBarElement.style.left = `${finalWidth + elementRef.value.offsetLeft}px`;
     }
-    column.value.ctx.emit("resizing", { width: finalWidth });
+    (_a = column2.value.ctx) == null ? void 0 : _a.emit("resizing", { width: finalWidth });
   };
   const onMouseup = (e) => {
+    var _a;
     const movementX = e.clientX - mouseDownScreenX;
     const newWidth = initialWidth + movementX;
-    const finalWidth = getFinalWidth(newWidth, column.value.minWidth, column.value.maxWidth);
-    column.value.width = finalWidth;
-    column.value.realWidth = finalWidth;
+    const finalWidth = getFinalWidth(newWidth, column2.value.minWidth, column2.value.maxWidth);
+    column2.value.width = finalWidth;
+    column2.value.realWidth = finalWidth;
     table2.updateColumnWidth();
     resizing.value = false;
     tableElement == null ? void 0 : tableElement.value.classList.remove("table-selector");
     dragClass.value = "";
     tableElement == null ? void 0 : tableElement.value.removeChild(resizeBarElement);
-    column.value.ctx.emit("resize-end", { width: finalWidth, beforeWidth: initialWidth });
+    (_a = column2.value.ctx) == null ? void 0 : _a.emit("resize-end", { width: finalWidth, beforeWidth: initialWidth });
     document.removeEventListener("mouseup", onMouseup);
     document.removeEventListener("mousemove", onMousemove);
   };
   const onMousedown = (e) => {
+    var _a;
     const isHandle = e.target.classList.contains("resize-handle");
     if (isHandle) {
-      column.value.ctx.emit("resize-start");
+      (_a = column2.value.ctx) == null ? void 0 : _a.emit("resize-start");
       const initialOffset = elementRef.value.offsetLeft;
       initialWidth = elementRef.value.clientWidth;
       mouseDownScreenX = e.clientX;
@@ -9966,14 +10215,21 @@ function useDragColumnWidth(elementRef, column) {
   };
   return { resizing, dragClass, onMousedown };
 }
+const headerThProps = {
+  column: {
+    type: Object,
+    required: true
+  },
+  colspan: {
+    type: Number
+  },
+  rowspan: {
+    type: Number
+  }
+};
 var TH = defineComponent({
   name: "DTableHeaderTh",
-  props: {
-    column: {
-      type: Object,
-      required: true
-    }
-  },
+  props: headerThProps,
   setup(props, {
     expose
   }) {
@@ -9981,30 +10237,30 @@ var TH = defineComponent({
     const store = table2.store;
     const headerContainerRef = ref();
     const {
-      column
+      column: column2
     } = toRefs(props);
     const {
       baseClass
-    } = useBaseRender(column);
+    } = useBaseRender(column2);
     const {
       direction,
       sortClass,
       handleSort,
       clearSortOrder
-    } = useSort(column);
+    } = useSort(column2);
     const {
       filterClass,
       handleFilter
-    } = useFilter(column);
+    } = useFilter(column2);
     const {
       stickyClass,
       stickyStyle
-    } = useFixedColumn(column);
+    } = useFixedColumn(column2);
     const {
       resizing,
       dragClass,
       onMousedown
-    } = useDragColumnWidth(headerContainerRef, column);
+    } = useDragColumnWidth(headerContainerRef, column2);
     expose({
       clearSortOrder
     });
@@ -10017,17 +10273,17 @@ var TH = defineComponent({
         "ref": headerContainerRef,
         "class": "header-container",
         "onMousedown": onMousedown
-      }, [(_b = (_a = column.value).renderHeader) == null ? void 0 : _b.call(_a, column.value, store), column.value.filterable && createVNode(Filter, {
-        "filterList": column.value.filterList,
-        "multiple": column.value.filterMultiple,
+      }, [(_b = (_a = column2.value).renderHeader) == null ? void 0 : _b.call(_a, column2.value, store), column2.value.filterable && createVNode(Filter, {
+        "filterList": column2.value.filterList,
+        "multiple": column2.value.filterMultiple,
         "onFilter": handleFilter
-      }, null), column.value.sortable && createVNode(Sort, {
+      }, null), column2.value.sortable && createVNode(Sort, {
         "sort-direction": direction.value,
         "onSort": handleSort
-      }, null), column.value.resizeable && createVNode("span", {
+      }, null), column2.value.resizeable && createVNode("span", {
         "class": "resize-handle",
         "onClick": (e) => e.stopPropagation()
-      }, null), column.value.resizeable && resizing.value && createVNode("div", {
+      }, null), column2.value.resizeable && resizing.value && createVNode("div", {
         "class": "resize-overlay",
         "onClick": (e) => e.stopPropagation()
       }, null)])]);
@@ -10036,53 +10292,53 @@ var TH = defineComponent({
 });
 function getAllColumns(columns) {
   const result = [];
-  columns.forEach((column) => {
-    if (column.children) {
-      result.push(column);
-      result.push.apply(result, getAllColumns(column.children));
+  columns.forEach((column2) => {
+    if (column2.children) {
+      result.push(column2);
+      result.push.apply(result, getAllColumns(column2.children));
     } else {
-      result.push(column);
+      result.push(column2);
     }
   });
   return result;
 }
 function convertToRows(originColumns) {
   let maxLevel = 1;
-  const traverse = (column, parent) => {
+  const traverse = (column2, parent) => {
     if (parent) {
-      column.level = parent.level + 1;
-      if (maxLevel < column.level) {
-        maxLevel = column.level;
+      column2.level = parent.level + 1;
+      if (maxLevel < column2.level) {
+        maxLevel = column2.level;
       }
     }
-    if (column.children) {
+    if (column2.children) {
       let colSpan = 0;
-      column.children.forEach((subColumn) => {
-        traverse(subColumn, column);
-        colSpan += subColumn.colSpan;
+      column2.children.forEach((subColumn) => {
+        traverse(subColumn, column2);
+        colSpan += subColumn.colSpan || 0;
       });
-      column.colSpan = colSpan;
+      column2.colSpan = colSpan;
     } else {
-      column.colSpan = 1;
+      column2.colSpan = 1;
     }
   };
-  originColumns.forEach((column) => {
-    column.level = 1;
-    traverse(column, void 0);
+  originColumns.forEach((column2) => {
+    column2.level = 1;
+    traverse(column2, void 0);
   });
   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;
+  allColumns.forEach((column2) => {
+    if (!column2.children) {
+      column2.rowSpan = maxLevel - (column2.level || 0) + 1;
     } else {
-      column.rowSpan = 1;
-      column.children.forEach((col) => col.isSubColumn = true);
+      column2.rowSpan = 1;
+      column2.children.forEach((col) => col.isSubColumn = true);
     }
-    rows[column.level - 1].push(column);
+    rows[column2.level - 1].push(column2);
   });
   return rows;
 }
@@ -10102,12 +10358,12 @@ var TableHeader = defineComponent({
     } = useHeader();
     return () => createVNode("thead", {
       "class": ns2.e("thead")
-    }, [headerRows.value.map((subColumns) => createVNode("tr", null, [subColumns.map((column, columnIndex) => {
+    }, [headerRows.value.map((subColumns) => createVNode("tr", null, [subColumns.map((column2, columnIndex) => {
       return createVNode(TH, {
         "key": columnIndex,
-        "column": column,
-        "colspan": column.colSpan,
-        "rowspan": column.rowSpan
+        "column": column2,
+        "colspan": column2.colSpan,
+        "rowspan": column2.rowSpan
       }, null);
     })]))]);
   }
@@ -10121,6 +10377,12 @@ const bodyTdProps = {
     type: Object,
     default: () => ({})
   },
+  rowspan: {
+    type: Number
+  },
+  colspan: {
+    type: Number
+  },
   index: {
     type: Number,
     default: 0
@@ -10276,11 +10538,12 @@ var Tooltip = defineComponent({
     })]);
   }
 });
-function useBodyTd(props) {
+function useBodyTd(props, ctx) {
   const tooltipContent = ref();
   const isShowTooltip = ref(false);
   const tdRef = ref();
   let observer;
+  const table2 = inject(TABLE_TOKEN);
   function getTooltipContent() {
     var _a, _b;
     return ((_a = tdRef.value) == null ? void 0 : _a.innerText) || ((_b = tdRef.value) == null ? void 0 : _b.textContent);
@@ -10294,36 +10557,64 @@ function useBodyTd(props) {
     range3.setEnd(tdRef.value, tdRef.value.childNodes.length);
     const rangeWidth = range3.getBoundingClientRect().width;
     const padding = parseInt(window.getComputedStyle(tdRef.value)["paddingLeft"], 10) + parseInt(window.getComputedStyle(tdRef.value)["paddingRight"], 10);
-    isShowTooltip.value = props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth;
+    isShowTooltip.value = !!(props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth);
   }
   onMounted(() => {
     if (inBrowser && window.ResizeObserver && props.column.showOverflowTooltip) {
-      const observer2 = new window.ResizeObserver(shouldShowTooltip);
-      tdRef.value && observer2.observe(tdRef.value);
+      const innerObserver = new window.ResizeObserver(shouldShowTooltip);
+      tdRef.value && innerObserver.observe(tdRef.value);
     }
     tooltipContent.value = getTooltipContent();
   });
   onBeforeMount(() => {
     tdRef.value && observer.unobserve(tdRef.value);
   });
-  return { tdRef, isShowTooltip, tooltipContent };
+  onUpdated(() => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+  });
+  const getCellKsy = () => {
+    return `${getRowIdentity(props.row, table2.props.rowKey, props.index)}-${props.column.field}-cell`;
+  };
+  const cellMode = computed(() => {
+    const cellKey = getCellKsy();
+    const mode = table2.store.states.tableCellModeMap.value.get(cellKey);
+    return mode || "readonly";
+  });
+  const onCellClick = () => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    const cellKey = getCellKsy();
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+    if (props.column.type === "editable" && modeMap.get(cellKey) === "edit") {
+      return;
+    }
+    ctx.emit("cellClick");
+  };
+  return { tdRef, isShowTooltip, tooltipContent, cellMode, onCellClick };
 }
 var TD = defineComponent({
   name: "DTableBodyTd",
   inheritAttrs: false,
   props: bodyTdProps,
+  emits: ["cellClick"],
   setup(props, ctx) {
-    const column = toRef(props, "column");
+    const column2 = toRef(props, "column");
     const table2 = inject(TABLE_TOKEN);
     const {
       stickyClass,
       stickyStyle
-    } = useFixedColumn(column);
+    } = useFixedColumn(column2);
     const {
       tdRef,
       isShowTooltip,
-      tooltipContent
-    } = useBodyTd(props);
+      tooltipContent,
+      cellMode,
+      onCellClick
+    } = useBodyTd(props, ctx);
     return () => {
       return createVNode(Tooltip, {
         "content": tooltipContent.value,
@@ -10335,21 +10626,24 @@ var TD = defineComponent({
             "ref": tdRef,
             "class": stickyClass.value,
             "style": stickyStyle.value
-          }, ctx.attrs), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index)])];
+          }, ctx.attrs, {
+            "onClick": onCellClick
+          }), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index, table2.props, cellMode)])];
         }
       });
     };
   }
 });
+const ns$1 = useNamespace("table");
 function useMergeCell() {
   const table2 = inject(TABLE_TOKEN);
   const { _data: data, _columns: columns } = table2.store.states;
-  const getSpan = (row, column, rowIndex, columnIndex) => {
+  const getSpan = (row, column2, rowIndex, columnIndex) => {
     const fn = table2 == null ? void 0 : table2.props.spanMethod;
     let rowspan = 1;
     let colspan = 1;
     if (typeof fn === "function") {
-      const result = fn({ row, column, rowIndex, columnIndex });
+      const result = fn({ row, column: column2, rowIndex, columnIndex });
       if (Array.isArray(result)) {
         rowspan = result[0];
         colspan = result[1];
@@ -10364,8 +10658,8 @@ function useMergeCell() {
     const result = {};
     if (table2 == null ? void 0 : table2.props.spanMethod) {
       data.value.forEach((row, rowIndex) => {
-        columns.value.forEach((column, columnIndex) => {
-          const { rowspan, colspan } = getSpan(row, column, rowIndex, columnIndex);
+        columns.value.forEach((column2, columnIndex) => {
+          const { rowspan, colspan } = getSpan(row, column2, rowIndex, columnIndex);
           if (rowspan > 1 || colspan > 1) {
             result[`${rowIndex}-${columnIndex}`] = [rowspan, colspan];
           }
@@ -10393,64 +10687,80 @@ function useMergeCell() {
   });
   return { tableSpans, removeCells };
 }
+function useBodyRender() {
+  const table2 = inject(TABLE_TOKEN);
+  const hoverEnabled = computed(() => table2 == null ? void 0 : table2.props.rowHoveredHighlight);
+  const rowLevelMap = (table2 == null ? void 0 : table2.store.states.rowLevelMap) || {};
+  const rowKey = (table2 == null ? void 0 : table2.props.rowKey) || "id";
+  const getTableRowClass = (row) => {
+    const level = rowLevelMap.value[getRowIdentity(row, rowKey)];
+    return {
+      [ns$1.e("row")]: true,
+      ["hover-enabled"]: hoverEnabled.value,
+      ["expanded"]: table2 == null ? void 0 : table2.store.isRowExpanded(row),
+      [ns$1.em("row", `level-${level}`)]: level !== void 0,
+      ["is-hidden"]: table2 == null ? void 0 : table2.store.states.hiddenRowKeys.value.includes(getRowIdentity(row, rowKey))
+    };
+  };
+  return { getTableRowClass };
+}
 var TableBody = defineComponent({
   name: "DTableBody",
   setup() {
     const table2 = inject(TABLE_TOKEN);
     const {
-      _data: data,
-      flatColumns
+      flatColumns,
+      flatRows
     } = table2.store.states;
     const ns2 = useNamespace("table");
-    const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
     const {
       tableSpans,
       removeCells
     } = useMergeCell();
+    const {
+      getTableRowClass
+    } = useBodyRender();
     const onCellClick = (cellClickArg) => {
       table2.emit("cell-click", cellClickArg);
     };
+    const onRowClick = (rowClickArg) => {
+      table2.emit("row-click", rowClickArg);
+    };
     return () => createVNode("tbody", {
       "class": ns2.e("tbody")
-    }, [data.value.map((row, rowIndex) => {
-      const tableRow = () => {
-        return createVNode("tr", {
-          "key": rowIndex,
-          "class": {
-            "hover-enabled": hoverEnabled.value,
-            "expanded": table2.store.isRowExpanded(row)
-          }
-        }, [flatColumns.value.map((column, columnIndex) => {
-          var _a;
-          const cellId = `${rowIndex}-${columnIndex}`;
-          const [rowspan, colspan] = (_a = tableSpans.value[cellId]) != null ? _a : [1, 1];
-          if (removeCells.value.includes(cellId)) {
-            return null;
-          }
-          return createVNode(TD, {
-            "column": column,
-            "index": rowIndex,
-            "row": row,
-            "rowspan": rowspan,
-            "colspan": colspan,
-            "onClick": () => onCellClick({
-              rowIndex,
-              columnIndex,
-              column,
-              row
-            })
-          }, null);
-        })]);
-      };
-      const expandedRow = () => {
-        var _a, _b, _c, _d;
-        return flatColumns.value.some((column) => column.type === "expand") && createVNode("tr", null, [createVNode("td", {
-          "colspan": flatColumns.value.length
-        }, [(_d = (_c = (_b = (_a = flatColumns.value.filter((column) => column.type === "expand")) == null ? void 0 : _a[0]) == null ? void 0 : _b.slots) == null ? void 0 : _c.default) == null ? void 0 : _d.call(_c, {
+    }, [flatRows.value.map((row, rowIndex) => {
+      var _a, _b, _c, _d;
+      return createVNode(Fragment, null, [createVNode("tr", {
+        "key": rowIndex,
+        "class": getTableRowClass(row),
+        "onClick": () => onRowClick({
           row
-        })])]);
-      };
-      return createVNode(Fragment, null, [tableRow(), table2.store.isRowExpanded(row) && expandedRow()]);
+        })
+      }, [flatColumns.value.map((column2, columnIndex) => {
+        var _a2;
+        const cellId = `${rowIndex}-${columnIndex}`;
+        const [rowspan, colspan] = (_a2 = tableSpans.value[cellId]) != null ? _a2 : [1, 1];
+        if (removeCells.value.includes(cellId)) {
+          return null;
+        }
+        return createVNode(TD, {
+          "column": column2,
+          "index": rowIndex,
+          "row": row,
+          "rowspan": rowspan,
+          "colspan": colspan,
+          "onCellClick": () => onCellClick({
+            rowIndex,
+            columnIndex,
+            column: column2,
+            row
+          })
+        }, null);
+      })]), flatColumns.value.some((column2) => column2.type === "expand") && table2.store.isRowExpanded(row) && createVNode("tr", null, [createVNode("td", {
+        "colspan": flatColumns.value.length
+      }, [(_d = (_c = (_b = (_a = flatColumns.value.filter((column2) => column2.type === "expand")) == null ? void 0 : _a[0]) == null ? void 0 : _b.slots) == null ? void 0 : _c.default) == null ? void 0 : _d.call(_c, {
+        row
+      })])])]);
     })]);
   }
 });
@@ -10517,8 +10827,8 @@ var Table = defineComponent({
   directives: {
     dLoading: loadingDirective
   },
-  props: TableProps,
-  emits: ["sort-change", "cell-click", "check-change", "check-all-change", "expand-change"],
+  props: tableProps,
+  emits: ["sort-change", "cell-click", "row-click", "check-change", "check-all-change", "expand-change"],
   setup(props, ctx) {
     const table2 = getCurrentInstance();
     const store = createStore(toRef(props, "data"), table2);
@@ -10535,6 +10845,7 @@ var Table = defineComponent({
       classes,
       styles
     } = useTable(props, tableWidth);
+    useTableWatcher(props, store);
     const isEmpty2 = computed(() => props.data.length === 0);
     const ns2 = useNamespace("table");
     const hiddenColumns = ref(null);
@@ -10547,6 +10858,8 @@ var Table = defineComponent({
     onMounted(async () => {
       await nextTick();
       store.updateColumns();
+      store.updateFirstDefaultColumn();
+      store.updateRows();
       updateColumnWidth();
     });
     return () => {
@@ -10650,45 +10963,86 @@ const tableColumnProps = {
     default: false
   }
 };
-function formatWidth(width) {
-  if (width === "") {
-    return width;
-  }
-  if (typeof width === "number") {
-    return width;
-  }
-  return parseInt(width, 10) || 80;
-}
+var column = "";
+const IconOpen = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon svg-icon-close"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#5e7ce0"
+}, null), createVNode("rect", {
+  "x": "4",
+  "y": "7",
+  "width": "8",
+  "height": "2",
+  "fill": "#5e7ce0"
+}, null)])]);
+const IconClose = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#252b3a"
+}, null), createVNode("path", {
+  "fill": "#252b3a",
+  "d": "M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
+}, null)])]);
+const ns = useNamespace("table");
 const cellMap = {
   checkable: {
-    renderHeader(column, store) {
+    renderHeader(column2, store) {
       return h(Checkbox, {
         modelValue: store.states._checkAll.value,
-        halfchecked: store.states._halfChecked.value,
+        halfChecked: store.states._halfChecked.value,
         onChange: (val) => {
           store.states._checkAll.value = val;
-          store._table.emit("check-all-change", val);
+          store._table.emit("check-all-change", val, store.getCheckedRows());
         }
       });
     },
-    renderCell(rowData, column, store, rowIndex) {
+    renderCell(rowData, column2, store, rowIndex) {
       return h(Checkbox, {
-        modelValue: store.isRowChecked(rowData),
+        modelValue: store.isRowChecked(rowData, rowIndex),
         onChange: (val) => {
-          store.checkRow(val, rowData);
-          store._table.emit("check-change", val, store.states._data.value[rowIndex]);
+          store.checkRow(val, rowData, rowIndex);
+          store._table.emit("check-change", val, store.states._data.value[rowIndex], store.getCheckedRows());
         }
       });
     }
   },
   index: {
-    renderHeader(column) {
+    renderHeader(column2) {
       var _a;
       return h("span", {
         class: "title"
-      }, (_a = column.header) != null ? _a : "#");
+      }, (_a = column2.header) != null ? _a : "#");
     },
-    renderCell(rowData, column, store, rowIndex) {
+    renderCell(rowData, column2, store, rowIndex) {
       return rowIndex + 1;
     }
   },
@@ -10696,31 +11050,109 @@ const cellMap = {
     renderHeader() {
       return createVNode("span", null, null);
     },
-    renderCell(rowData, column, store, rowIndex) {
+    renderCell(rowData, column2, store) {
       return createVNode(Icon, {
         "name": "chevron-right",
         "class": "icon-expand-row",
         "onClick": () => {
-          store.toggleRow(rowData);
-          store._table.emit("expand-change", rowData, store.getExpandedRows());
+          store.toggleRowExpansion(rowData);
         }
       }, null);
     }
   },
-  default: {
-    renderHeader(column) {
+  editable: {
+    renderHeader(column2) {
       var _a;
       return h("span", {
         class: "title"
-      }, (_a = column.header) != null ? _a : "");
+      }, (_a = column2.header) != null ? _a : "");
     },
-    renderCell(rowData, column, store, rowIndex) {
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx) {
       var _a, _b;
-      const value = column.field ? rowData[column.field] : "";
-      if (column.formatter) {
-        return column.formatter(rowData, column, value, rowIndex);
+      let columnValue;
+      if (cellMode.value === "edit") {
+        columnValue = ctx.slots.cellEdit ? ctx.slots.cellEdit({
+          row: rowData,
+          rowIndex
+        }) : "";
+      } else {
+        if (ctx.slots.cell) {
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [ctx.slots.cell({
+            row: rowData,
+            rowIndex
+          })]);
+        } else {
+          const value = column2.field ? rowData[column2.field] : "";
+          if (column2.formatter) {
+            columnValue = column2.formatter(rowData, column2, value, rowIndex);
+          }
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [(_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : ""]);
+        }
       }
-      return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
+      return h("div", {
+        class: [ns.e("cell"), column2.type === "editable" && (cellMode == null ? void 0 : cellMode.value) === "readonly" && "editable-cell"]
+      }, columnValue);
+    }
+  },
+  default: {
+    renderHeader(column2) {
+      var _a;
+      return h("span", {
+        class: "title"
+      }, (_a = column2.header) != null ? _a : "");
+    },
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx) {
+      var _a, _b, _c;
+      let columnValue;
+      if (ctx.slots.default) {
+        columnValue = ctx.slots.default({
+          row: rowData,
+          rowIndex
+        });
+      } else {
+        const value = column2.field ? rowData[column2.field] : "";
+        if (column2.formatter) {
+          columnValue = column2.formatter(rowData, column2, value, rowIndex);
+        }
+        columnValue = (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
+      }
+      const hasExpandColumn = store.states.flatColumns.value.some((column22) => column22.type === "expand");
+      const hasChildren = store.states._data.value.some((row) => {
+        var _a2;
+        return (_a2 = row.children) == null ? void 0 : _a2.length;
+      });
+      const level = store.states.rowLevelMap.value[getRowIdentity(rowData, props.rowKey)] || 0;
+      const indentDom = h("span", {
+        class: `${ns.e("indent")}`,
+        style: {
+          paddingLeft: `${level * props.indent}px`
+        }
+      }, "");
+      const isTreeCell = store.states.firstDefaultColumn.value === column2.id;
+      const showIndentDom = isTreeCell && level;
+      const showExpendIconDom = isTreeCell && ((_c = rowData.children) == null ? void 0 : _c.length);
+      const expendIconDom = createVNode("span", {
+        "class": ns.e("tree-operate"),
+        "onClick": () => {
+          store.toggleRowExpansion(rowData);
+        },
+        "style": showExpendIconDom ? "" : "visibility: hidden;"
+      }, [store.isRowExpanded(rowData) ? createVNode(IconOpen, null, null) : createVNode(IconClose, null, null)]);
+      const cellDom = [];
+      if (showIndentDom) {
+        cellDom.push(indentDom);
+      }
+      if (hasChildren && !hasExpandColumn && isTreeCell) {
+        cellDom.push(expendIconDom);
+      }
+      cellDom.push(columnValue);
+      return h("div", {
+        class: `${ns.e("cell")} `
+      }, cellDom);
     }
   }
 };
@@ -10746,64 +11178,65 @@ function createColumn(id, props, ctx) {
     showOverflowTooltip,
     resizeable
   } = props;
-  const column = reactive({ id });
-  column.type = type4.value;
+  const column2 = reactive({ id });
+  column2.type = type4.value;
   function renderHeader(columnItem, store) {
     if (ctx.slots.header) {
       return ctx.slots.header(columnItem);
     }
     return cellMap[type4.value || "default"].renderHeader(columnItem, store);
   }
-  function renderCell(rowData, columnItem, store, rowIndex) {
-    if (ctx.slots.default && columnItem.type !== "expand") {
+  function renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode) {
+    if (ctx.slots.default && columnItem.type === "index") {
       return ctx.slots.default({ row: rowData, rowIndex });
     }
-    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex);
+    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode, ctx);
   }
   watch([field, header2, order], ([fieldVal, headerVal, orderVal]) => {
-    column.field = fieldVal;
-    column.header = headerVal;
-    column.order = orderVal;
+    column2.field = fieldVal;
+    column2.header = headerVal;
+    column2.order = orderVal;
   }, { immediate: true });
   watch([sortable, sortDirection, sortMethod], ([sortableVal, sortDirectionVal, sortMethodVal]) => {
-    column.sortable = sortableVal;
-    column.sortDirection = sortDirectionVal;
-    column.sortMethod = sortMethodVal;
+    column2.sortable = sortableVal;
+    column2.sortDirection = sortDirectionVal;
+    column2.sortMethod = sortMethodVal;
   }, { immediate: true });
   watch([filterable, filterList, filterMultiple], ([filterableVal, filterListVal, filterMultipleVal]) => {
-    column.filterable = filterableVal;
-    column.filterMultiple = filterMultipleVal;
-    column.filterList = filterListVal;
+    column2.filterable = filterableVal;
+    column2.filterMultiple = filterMultipleVal;
+    column2.filterList = filterListVal;
   }, { immediate: true });
   watch([fixedLeft, fixedRight], ([left, right]) => {
-    column.fixedLeft = left;
-    column.fixedRight = right;
+    column2.fixedLeft = left;
+    column2.fixedRight = right;
   }, { immediate: true });
   watch(align, (alignVal) => {
-    column.align = alignVal;
+    column2.align = alignVal;
   }, { immediate: true });
   watch(showOverflowTooltip, (showVal) => {
-    column.showOverflowTooltip = showVal;
+    column2.showOverflowTooltip = showVal;
   }, { immediate: true });
   watch(resizeable, (resizeVal) => {
-    column.resizeable = resizeVal;
+    column2.resizeable = resizeVal;
   }, { immediate: true });
   watch([width, minWidth, maxWidth], ([widthVal, minWidthVal, maxWidthVal]) => {
-    column.width = formatWidth(widthVal);
-    column.minWidth = minWidthVal;
-    column.maxWidth = maxWidthVal;
-    column.realWidth = column.width;
+    column2.width = formatWidth(widthVal);
+    column2.minWidth = minWidthVal;
+    column2.maxWidth = maxWidthVal;
+    column2.realWidth = column2.width;
   }, { immediate: true });
   onBeforeMount(() => {
-    column.id = id;
-    column.renderHeader = renderHeader;
-    column.renderCell = renderCell;
-    column.formatter = formatter == null ? void 0 : formatter.value;
-    column.customFilterTemplate = ctx.slots.customFilterTemplate;
-    column.subColumns = ctx.slots.subColumns;
-    column.slots = ctx.slots;
+    column2.id = id;
+    column2.renderHeader = renderHeader;
+    column2.renderCell = renderCell;
+    column2.formatter = formatter == null ? void 0 : formatter.value;
+    column2.customFilterTemplate = ctx.slots.customFilterTemplate;
+    column2.subColumns = ctx.slots.subColumns;
+    column2.slots = ctx.slots;
+    column2.ctx = ctx;
   });
-  return column;
+  return column2;
 }
 function useRender() {
   const instance = getCurrentInstance();
@@ -10825,7 +11258,6 @@ var Column = defineComponent({
   props: tableColumnProps,
   emits: ["filter-change", "resize-start", "resizing", "resize-end"],
   setup(props, ctx) {
-    toRefs(props);
     const owner = inject(TABLE_TOKEN);
     const isSubColumn = ref(false);
     const {
@@ -10835,16 +11267,16 @@ var Column = defineComponent({
     const parent = columnOrTableParent.value;
     const instance = getCurrentInstance();
     instance.columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
-    const column = createColumn(instance.columnId, toRefs(props), ctx);
-    instance.columnConfig = column;
+    const column2 = createColumn(instance.columnId, toRefs(props), ctx);
+    instance.columnConfig = column2;
     onBeforeMount(() => {
       isSubColumn.value = owner !== parent;
     });
     onMounted(() => {
-      var _a;
-      const children = isSubColumn.value ? parent.vnode.el.children : (_a = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _a.children;
+      var _a, _b, _c;
+      const children = isSubColumn.value ? (_b = (_a = parent == null ? void 0 : parent.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.children : (_c = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _c.children;
       const columnIndex = getColumnIndex(children || [], instance.vnode.el);
-      columnIndex > -1 && (owner == null ? void 0 : owner.store.insertColumn(column, isSubColumn.value ? parent.columnConfig : null));
+      columnIndex > -1 && (owner == null ? void 0 : owner.store.insertColumn(column2, isSubColumn.value ? parent.columnConfig : null));
       if (typeof props.checkable === "function") {
         for (const [rowIndex, row] of owner == null ? void 0 : owner.store.states._data.value.entries()) {
           if (props.checkable(row, rowIndex)) {
@@ -10853,11 +11285,11 @@ var Column = defineComponent({
         }
       }
     });
-    watch(() => column.order, () => {
+    watch(() => column2.order, () => {
       owner == null ? void 0 : owner.store.sortColumn();
     });
     onBeforeUnmount(() => {
-      owner == null ? void 0 : owner.store.removeColumn(column);
+      owner == null ? void 0 : owner.store.removeColumn(column2);
     });
     return () => {
       var _a, _b;
@@ -10866,17 +11298,17 @@ var Column = defineComponent({
         column: {},
         $index: -1
       });
-      return createVNode("div", null, [Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
+      return createVNode("div", null, [defaultSlot && Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
     };
   }
 });
 var index = {
   title: "Table \u8868\u683C",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "20%",
+  status: "50%",
   install(app) {
     app.component(Table.name, Table);
     app.component(Column.name, Column);
   }
 };
-export { Column, Table, index as default };
+export { Column, TABLE_TOKEN, Table, index as default, tableProps };