vue-devui 1.0.0-rc.11 → 1.0.0-rc.14

package/table/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { computed, ref, watchEffect, getCurrentInstance, 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, 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 = {
@@ -111,7 +111,8 @@ const tableProps = {
     default: true
   },
   rowKey: {
-    type: String
+    type: [Function, String],
+    default: "id"
   },
   defaultExpandAll: {
     type: Boolean,
@@ -120,8 +121,9 @@ const tableProps = {
   expandRowKeys: {
     type: Array
   },
-  trackBy: {
-    type: Function
+  indent: {
+    type: Number,
+    default: 16
   }
 };
 const TABLE_TOKEN = Symbol();
@@ -166,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 };
 };
@@ -191,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);
       }
     }
   };
@@ -208,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;
     }
@@ -254,6 +256,9 @@ function useTableWatcher(props, store) {
       store.setExpandRows(props.expandRowKeys);
     }
   });
+  watch(() => props.data, () => {
+    store.updateRows();
+  }, { deep: true });
 }
 const inBrowser = typeof window !== "undefined";
 function getElement(element) {
@@ -285,6 +290,8 @@ function lockScroll() {
   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;
@@ -294,13 +301,18 @@ function formatWidth(width) {
   }
   return parseInt(width, 10) || 80;
 }
-function getRowIdentity(row, rowKey) {
-  const paths = rowKey.split(".");
-  let obj = row;
-  for (const p of paths) {
-    obj = obj[p];
-  }
-  return `${obj}`;
+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 = {};
@@ -336,7 +348,31 @@ function toggleRowExpandStatus(rowsArr, row, status) {
   }
   return isChanged;
 }
-function useExpand(dataSource) {
+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);
@@ -359,14 +395,32 @@ function useExpand(dataSource) {
       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());
     }
-  };
-  const isRowExpanded = (row) => {
-    return _expandedRows.value.includes(row);
+    if (!table2.store.states.flatColumns.value.some((column2) => column2.type === "expand")) {
+      doToggleRowVisible(isRowExpanded(row), row);
+    }
   };
   return {
     isRowExpanded,
@@ -375,29 +429,55 @@ function useExpand(dataSource) {
     toggleRowExpansion
   };
 }
-function replaceColumn(array4, column) {
+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 = () => {
@@ -406,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;
     }
@@ -432,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(key);
+    }
+  };
+  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 {
-      _checkSet.value.delete(trackBy(row));
+      if (isIncluded) {
+        deleteRow();
+      } else {
+        addRow();
+      }
     }
   };
-  const isRowChecked = (row) => {
-    return _checkSet.value.has(trackBy(row));
+  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);
       });
     }
   });
@@ -466,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);
     }
@@ -476,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,
@@ -484,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);
@@ -499,20 +651,22 @@ 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 };
-};
+}
 function createStore(dataSource, table2) {
   const _data = ref([]);
   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 { 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);
+  const { isRowExpanded, updateExpandRows, setExpandRows, toggleRowExpansion } = useExpand(_data, table2);
+  const { tableCellModeMap, setCellMode, resetCellMode } = useEditTableCell();
   watch(dataSource, (value) => {
     _data.value = [...value];
     updateExpandRows();
@@ -521,25 +675,35 @@ function createStore(dataSource, table2) {
     _table: table2,
     states: {
       _data,
+      flatRows,
+      hiddenRowKeys,
+      rowLevelMap,
       _columns,
       flatColumns,
       _checkSet,
       _checkAll,
       _halfChecked,
       isFixedLeft,
-      thList
+      thList,
+      firstDefaultColumn,
+      tableCellModeMap
     },
     insertColumn,
     sortColumn,
     removeColumn,
     updateColumns,
+    updateRows,
     getCheckedRows,
     sortData,
     isRowChecked,
     checkRow,
     isRowExpanded,
     setExpandRows,
-    toggleRowExpansion
+    toggleRowExpansion,
+    toggleRowSelection,
+    updateFirstDefaultColumn,
+    setCellMode,
+    resetCellMode
   };
 }
 var ColGroup = defineComponent({
@@ -548,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);
     })]);
   }
@@ -564,6 +728,9 @@ const sortProps = {
   }
 };
 var sort = "";
+const XLINK_HREF = {
+  "xlink:href": "#sort-svg-path-1"
+};
 var Sort = defineComponent({
   props: sortProps,
   emits: ["sort"],
@@ -622,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"
@@ -695,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);
@@ -1069,9 +1242,9 @@ const FlexibleOverlay = defineComponent({
   }
 });
 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) {
@@ -1417,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);
   };
@@ -1453,6 +1627,7 @@ function useIconDom(props, ctx) {
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
+  emits: ["click"],
   setup(props, ctx) {
     const {
       disabled,
@@ -1468,10 +1643,10 @@ var Icon = defineComponent({
       [ns2.m("operable")]: operable.value
     }));
     const onClick = (e) => {
-      e.stopImmediatePropagation();
       if (disabled.value) {
-        e.preventDefault();
+        return;
       }
+      ctx.emit("click", e);
     };
     return () => {
       var _a, _b, _c, _d;
@@ -2816,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;
       }
@@ -3026,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) {
@@ -3189,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) {
@@ -3261,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);
         };
       }
@@ -3311,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 {
@@ -4613,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;
@@ -5337,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) : [];
@@ -5405,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) {
@@ -5726,7 +5901,7 @@ 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);
@@ -5778,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;
         }
@@ -5840,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) {
@@ -5865,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]());
@@ -5994,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;
       }
@@ -6101,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;
       }
@@ -6122,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 = {};
           }
@@ -6539,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;
@@ -6849,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;
@@ -6874,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;
@@ -6891,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;
@@ -7681,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"
@@ -7708,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"
@@ -7725,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"
@@ -7746,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",
@@ -9127,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;
     });
   };
@@ -9727,6 +9902,177 @@ function useFilterSingle(ctx) {
   };
   return { selectedItem, handleSelect };
 }
+function deepAssign(...objects) {
+  const isObject2 = (obj) => obj && typeof obj === "object";
+  return objects.reduce((prev, from) => {
+    Object.keys(from).forEach((key) => {
+      const pVal = prev[key];
+      const oVal = from[key];
+      if (Array.isArray(pVal) && Array.isArray(oVal)) {
+        prev[key] = Array.from(/* @__PURE__ */ new Set([...oVal, ...pVal]));
+      } else if (isObject2(pVal) && isObject2(oVal)) {
+        prev[key] = deepAssign(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
+var zhCN = {
+  pagination: {
+    totalItemText: "\u6240\u6709\u6761\u76EE",
+    goToText: "\u8DF3\u81F3"
+  },
+  accordion: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  autoCompleteDropdown: {
+    latestInput: "\u6700\u8FD1\u8F93\u5165"
+  },
+  cascaderList: {
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  colorPicker: {
+    foundationPanel: "\u57FA\u7840\u9762\u677F",
+    advancedPanel: "\u9AD8\u7EA7\u9762\u677F"
+  },
+  datePickerPro: {
+    ok: "\u786E\u5B9A",
+    placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+    month1: "1\u6708",
+    month2: "2\u6708",
+    month3: "3\u6708",
+    month4: "4\u6708",
+    month5: "5\u6708",
+    month6: "6\u6708",
+    month7: "7\u6708",
+    month8: "8\u6708",
+    month9: "9\u6708",
+    month10: "10\u6708",
+    month11: "11\u6708",
+    month12: "12\u6708",
+    year: "\u5E74",
+    startPlaceholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65E5\u671F",
+    endPlaceholder: "\u8BF7\u9009\u62E9\u7ED3\u675F\u65E5\u671F",
+    getWeekDays() {
+      return ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+    },
+    getTimeArr() {
+      return ["\u65F6", "\u5206", "\u79D2"];
+    },
+    getYearMonthStr(year, month) {
+      return `${year}\u5E74${month}\u6708`;
+    }
+  },
+  editableSelect: {
+    noRelatedRecords: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    noData: "\u6CA1\u6709\u6570\u636E"
+  },
+  input: {
+    placeholder: "\u8BF7\u8F93\u5165"
+  },
+  splitterBar: {
+    collapse: "\u6536\u8D77",
+    expand: "\u5C55\u5F00"
+  },
+  stepsGuide: {
+    previous: "\u4E0A\u4E00\u6B65",
+    continue: "\u6211\u77E5\u9053\u5566\uFF0C\u7EE7\u7EED",
+    ok: "\u6211\u77E5\u9053\u5566"
+  },
+  table: {
+    selectAll: "\u5168\u9009",
+    ok: "\u786E\u5B9A"
+  },
+  timePopup: {
+    ok: "\u786E\u5B9A"
+  },
+  transfer: {
+    unit: "\u9879",
+    panelUnit: "\u9879",
+    headerUnit: "\u9879",
+    noData: "\u6682\u65E0\u6570\u636E",
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22"
+  },
+  tree: {
+    loading: "\u52A0\u8F7D\u4E2D",
+    newNode: "\u65B0\u8282\u70B9",
+    selectPlaceholder: "\u8BF7\u9009\u62E9"
+  },
+  upload: {
+    placeholder: "\u9009\u62E9\u6587\u4EF6",
+    getExistSameNameFilesMsg(sameNames) {
+      return `\u60A8\u4E0A\u4F20\u7684 "${sameNames}" \u5B58\u5728\u91CD\u540D\u6587\u4EF6, \u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+    },
+    getAllFilesBeyondMaximalFileSizeMsg(maximalSize) {
+      return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u672C\u6B21\u4E0A\u4F20\u7684\u6240\u6709\u6587\u4EF6\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+    },
+    getBeyondMaximalFileSizeMsg(filename, maximalSize) {
+      return `\u6700\u5927\u652F\u6301\u4E0A\u4F20${maximalSize}MB\u7684\u6587\u4EF6, \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u8D85\u8FC7\u53EF\u4E0A\u4F20\u6587\u4EF6\u5927\u5C0F`;
+    },
+    getNotAllowedFileTypeMsg(filename, scope) {
+      return `\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B: "${scope}", \u60A8\u4E0A\u4F20\u7684\u6587\u4EF6"${filename}"\u4E0D\u5728\u5141\u8BB8\u8303\u56F4\u5185\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u6587\u4EF6`;
+    }
+  },
+  search: {
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57"
+  },
+  select: {
+    placeholder: "\u8BF7\u9009\u62E9",
+    noDataText: "\u65E0\u6570\u636E",
+    noMatchText: "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55",
+    loadingText: "\u52A0\u8F7D\u4E2D..."
+  },
+  tagInput: {
+    maxTagsText: "\u5DF2\u8FBE\u5230\u6700\u5927\u4E2A\u6570\uFF1A"
+  },
+  timeSelect: {
+    placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4"
+  }
+};
+const lang = ref("zh-CN");
+let langMessages = reactive({
+  [lang.value]: zhCN
+});
+const Locale = {
+  messages() {
+    return langMessages[lang.value];
+  },
+  lang() {
+    return lang.value;
+  },
+  use(newLang, newMessages2) {
+    lang.value = newLang;
+    this.add({ [newLang]: newMessages2 });
+  },
+  add(newMessages2 = {}) {
+    langMessages = deepAssign(langMessages, newMessages2);
+  }
+};
+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) => {
+    var _a;
+    const messages2 = ((_a = app == null ? void 0 : app.appContext.config.globalProperties.langMessages) == null ? void 0 : _a.value) || Locale.messages();
+    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: {
@@ -9736,37 +10082,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 = "";
@@ -9886,17 +10237,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)
   }));
@@ -9904,7 +10255,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) => {
@@ -9918,22 +10269,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 };
 }
@@ -9954,7 +10306,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;
@@ -9963,33 +10315,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;
@@ -10010,14 +10365,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
   }) {
@@ -10025,30 +10387,32 @@ var TH = defineComponent({
     const store = table2.store;
     const headerContainerRef = ref();
     const {
-      column
+      column: column2,
+      colspan,
+      rowspan
     } = 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
     });
@@ -10056,22 +10420,24 @@ var TH = defineComponent({
       var _a, _b;
       return createVNode("th", {
         "class": [baseClass.value, stickyClass.value, sortClass.value, filterClass.value, dragClass.value],
-        "style": stickyStyle.value
+        "style": stickyStyle.value,
+        "colspan": colspan == null ? void 0 : colspan.value,
+        "rowspan": rowspan == null ? void 0 : rowspan.value
       }, [createVNode("div", {
         "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)])]);
@@ -10080,53 +10446,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;
 }
@@ -10146,12 +10512,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);
     })]))]);
   }
@@ -10165,6 +10531,12 @@ const bodyTdProps = {
     type: Object,
     default: () => ({})
   },
+  rowspan: {
+    type: Number
+  },
+  colspan: {
+    type: Number
+  },
   index: {
     type: Number,
     default: 0
@@ -10320,11 +10692,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);
@@ -10338,36 +10711,68 @@ 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 {
+      column: column2,
+      rowspan,
+      colspan
+    } = toRefs(props);
     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,
@@ -10379,21 +10784,26 @@ 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, {
+            "rowspan": rowspan == null ? void 0 : rowspan.value,
+            "colspan": colspan == null ? void 0 : colspan.value,
+            "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];
@@ -10408,8 +10818,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];
           }
@@ -10437,20 +10847,39 @@ 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);
     };
@@ -10459,18 +10888,15 @@ var TableBody = defineComponent({
     };
     return () => createVNode("tbody", {
       "class": ns2.e("tbody")
-    }, [data.value.map((row, rowIndex) => {
+    }, [flatRows.value.map((row, rowIndex) => {
       var _a, _b, _c, _d;
       return createVNode(Fragment, null, [createVNode("tr", {
         "key": rowIndex,
-        "class": {
-          "hover-enabled": hoverEnabled.value,
-          expanded: table2.store.isRowExpanded(row)
-        },
+        "class": getTableRowClass(row),
         "onClick": () => onRowClick({
           row
         })
-      }, [flatColumns.value.map((column, columnIndex) => {
+      }, [flatColumns.value.map((column2, columnIndex) => {
         var _a2;
         const cellId = `${rowIndex}-${columnIndex}`;
         const [rowspan, colspan] = (_a2 = tableSpans.value[cellId]) != null ? _a2 : [1, 1];
@@ -10478,21 +10904,21 @@ var TableBody = defineComponent({
           return null;
         }
         return createVNode(TD, {
-          "column": column,
+          "column": column2,
           "index": rowIndex,
           "row": row,
           "rowspan": rowspan,
           "colspan": colspan,
-          "onClick": () => onCellClick({
+          "onCellClick": () => onCellClick({
             rowIndex,
             columnIndex,
-            column,
+            column: column2,
             row
           })
         }, null);
-      })]), flatColumns.value.some((column) => column.type === "expand") && table2.store.isRowExpanded(row) && createVNode("tr", null, [createVNode("td", {
+      })]), 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((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, {
+      }, [(_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
       })])])]);
     })]);
@@ -10592,6 +11018,8 @@ var Table = defineComponent({
     onMounted(async () => {
       await nextTick();
       store.updateColumns();
+      store.updateFirstDefaultColumn();
+      store.updateRows();
       updateColumnWidth();
     });
     return () => {
@@ -10695,36 +11123,86 @@ const tableColumnProps = {
     default: false
   }
 };
+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,
         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;
     }
   },
@@ -10732,7 +11210,7 @@ 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",
@@ -10742,20 +11220,99 @@ const cellMap = {
       }, 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);
     }
   }
 };
@@ -10781,64 +11338,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();
@@ -10860,7 +11418,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 {
@@ -10870,16 +11427,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)) {
@@ -10888,11 +11445,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;
@@ -10901,14 +11458,14 @@ 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);