@juzhenfe/page-model 3.9.36 → 3.9.38

package/dist/index.es.js

@@ -217,11 +217,11 @@ function retryFunc(fn, isCanExecute, retryTimes = 3, interval = 100) {
     });
   };
 }
-const _hoisted_1$t = { class: "scenes-tab" };
+const _hoisted_1$s = { class: "scenes-tab" };
 const __default__$n = {
   name: "ScenesTab"
 };
-const _sfc_main$S = defineComponent({
+const _sfc_main$R = defineComponent({
   ...__default__$n,
   setup(__props, { expose: __expose }) {
     const getValue = () => {
@@ -231,7 +231,7 @@ const _sfc_main$S = defineComponent({
       getValue
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t);
+      return openBlock(), createElementBlock("div", _hoisted_1$s);
     };
   }
 });
@@ -239,7 +239,7 @@ var index_vue_vue_type_style_index_0_lang$c = "";
 const __default__$m = {
   name: "NormalTab"
 };
-const _sfc_main$R = defineComponent({
+const _sfc_main$Q = defineComponent({
   ...__default__$m,
   props: {
     panes: {},
@@ -1035,7 +1035,7 @@ var index_vue_vue_type_style_index_0_lang$b = "";
 const __default__$l = {
   name: "TopTabs"
 };
-const _sfc_main$Q = defineComponent({
+const _sfc_main$P = defineComponent({
   ...__default__$l,
   props: {
     tabs: {},
@@ -1056,12 +1056,12 @@ const _sfc_main$Q = defineComponent({
     const tabComponent = computed(() => {
       if (props.tabs.useScene) {
         return {
-          component: _sfc_main$S,
+          component: _sfc_main$R,
           props: props.tabs.sceneTab
         };
       } else {
         return {
-          component: _sfc_main$R,
+          component: _sfc_main$Q,
           props: {
             panes: props.tabs.panes,
             props: props.tabs.props
@@ -1681,29 +1681,8 @@ var _export_sfc$1 = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$P = defineComponent({
-  name: "ArrowDownBold"
-});
-const _hoisted_1$s = {
-  class: "icon",
-  width: "200",
-  height: "200",
-  viewBox: "0 0 1024 1024",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_2$n = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "M104.704 338.752a64 64 0 0190.496 0l316.8 316.8 316.8-316.8a64 64 0 0190.496 90.496L557.248 791.296a64 64 0 01-90.496 0L104.704 429.248a64 64 0 010-90.496z"
-}, null, -1);
-const _hoisted_3$m = [
-  _hoisted_2$n
-];
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$s, _hoisted_3$m);
-}
-var arrowDownBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["render", _sfc_render$h]]);
 const _sfc_main$O = defineComponent({
-  name: "ArrowDown"
+  name: "ArrowDownBold"
 });
 const _hoisted_1$r = {
   class: "icon",
@@ -1714,7 +1693,7 @@ const _hoisted_1$r = {
 };
 const _hoisted_2$m = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
+  d: "M104.704 338.752a64 64 0 0190.496 0l316.8 316.8 316.8-316.8a64 64 0 0190.496 90.496L557.248 791.296a64 64 0 01-90.496 0L104.704 429.248a64 64 0 010-90.496z"
 }, null, -1);
 const _hoisted_3$l = [
   _hoisted_2$m
@@ -1722,9 +1701,9 @@ const _hoisted_3$l = [
 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$r, _hoisted_3$l);
 }
-var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["render", _sfc_render$g]]);
+var arrowDownBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["render", _sfc_render$g]]);
 const _sfc_main$N = defineComponent({
-  name: "CaretBottom"
+  name: "ArrowDown"
 });
 const _hoisted_1$q = {
   class: "icon",
@@ -1735,7 +1714,7 @@ const _hoisted_1$q = {
 };
 const _hoisted_2$l = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M192 384l320 384 320-384z"
+  d: "M831.872 340.864L512 652.672 192.128 340.864a30.592 30.592 0 00-42.752 0 29.12 29.12 0 000 41.6L489.664 714.24a32 32 0 0044.672 0l340.288-331.712a29.12 29.12 0 000-41.728 30.592 30.592 0 00-42.752 0z"
 }, null, -1);
 const _hoisted_3$k = [
   _hoisted_2$l
@@ -1743,9 +1722,9 @@ const _hoisted_3$k = [
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$q, _hoisted_3$k);
 }
-var caretBottom = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["render", _sfc_render$f]]);
+var arrowDown = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["render", _sfc_render$f]]);
 const _sfc_main$M = defineComponent({
-  name: "CaretRight"
+  name: "CaretBottom"
 });
 const _hoisted_1$p = {
   class: "icon",
@@ -1756,7 +1735,7 @@ const _hoisted_1$p = {
 };
 const _hoisted_2$k = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M384 192v640l384-320.064z"
+  d: "M192 384l320 384 320-384z"
 }, null, -1);
 const _hoisted_3$j = [
   _hoisted_2$k
@@ -1764,9 +1743,9 @@ const _hoisted_3$j = [
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$p, _hoisted_3$j);
 }
-var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["render", _sfc_render$e]]);
+var caretBottom = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["render", _sfc_render$e]]);
 const _sfc_main$L = defineComponent({
-  name: "CaretTop"
+  name: "CaretRight"
 });
 const _hoisted_1$o = {
   class: "icon",
@@ -1777,7 +1756,7 @@ const _hoisted_1$o = {
 };
 const _hoisted_2$j = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M512 320L192 704h639.936z"
+  d: "M384 192v640l384-320.064z"
 }, null, -1);
 const _hoisted_3$i = [
   _hoisted_2$j
@@ -1785,9 +1764,9 @@ const _hoisted_3$i = [
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$o, _hoisted_3$i);
 }
-var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["render", _sfc_render$d]]);
+var caretRight = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["render", _sfc_render$d]]);
 const _sfc_main$K = defineComponent({
-  name: "CirclePlusFilled"
+  name: "CaretTop"
 });
 const _hoisted_1$n = {
   class: "icon",
@@ -1798,7 +1777,7 @@ const _hoisted_1$n = {
 };
 const _hoisted_2$i = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-38.4 409.6H326.4a38.4 38.4 0 100 76.8h147.2v147.2a38.4 38.4 0 0076.8 0V550.4h147.2a38.4 38.4 0 000-76.8H550.4V326.4a38.4 38.4 0 10-76.8 0v147.2z"
+  d: "M512 320L192 704h639.936z"
 }, null, -1);
 const _hoisted_3$h = [
   _hoisted_2$i
@@ -1806,9 +1785,9 @@ const _hoisted_3$h = [
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$n, _hoisted_3$h);
 }
-var circlePlusFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["render", _sfc_render$c]]);
+var caretTop = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["render", _sfc_render$c]]);
 const _sfc_main$J = defineComponent({
-  name: "CirclePlus"
+  name: "CirclePlusFilled"
 });
 const _hoisted_1$m = {
   class: "icon",
@@ -1819,27 +1798,17 @@ const _hoisted_1$m = {
 };
 const _hoisted_2$h = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
-}, null, -1);
-const _hoisted_3$g = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"
-}, null, -1);
-const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("path", {
-  fill: "currentColor",
-  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm-38.4 409.6H326.4a38.4 38.4 0 100 76.8h147.2v147.2a38.4 38.4 0 0076.8 0V550.4h147.2a38.4 38.4 0 000-76.8H550.4V326.4a38.4 38.4 0 10-76.8 0v147.2z"
 }, null, -1);
-const _hoisted_5$3 = [
-  _hoisted_2$h,
-  _hoisted_3$g,
-  _hoisted_4$5
+const _hoisted_3$g = [
+  _hoisted_2$h
 ];
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$m, _hoisted_5$3);
+  return openBlock(), createElementBlock("svg", _hoisted_1$m, _hoisted_3$g);
 }
-var circlePlus = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["render", _sfc_render$b]]);
+var circlePlusFilled = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["render", _sfc_render$b]]);
 const _sfc_main$I = defineComponent({
-  name: "CloseBold"
+  name: "CirclePlus"
 });
 const _hoisted_1$l = {
   class: "icon",
@@ -1850,40 +1819,51 @@ const _hoisted_1$l = {
 };
 const _hoisted_2$g = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
-  d: "M195.2 195.2a64 64 0 0190.496 0L512 421.504 738.304 195.2a64 64 0 0190.496 90.496L602.496 512 828.8 738.304a64 64 0 01-90.496 90.496L512 602.496 285.696 828.8a64 64 0 01-90.496-90.496L421.504 512 195.2 285.696a64 64 0 010-90.496z"
+  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
+}, null, -1);
+const _hoisted_3$f = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"
+}, null, -1);
+const _hoisted_4$6 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
 }, null, -1);
-const _hoisted_3$f = [
-  _hoisted_2$g
+const _hoisted_5$3 = [
+  _hoisted_2$g,
+  _hoisted_3$f,
+  _hoisted_4$6
 ];
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$l, _hoisted_3$f);
+  return openBlock(), createElementBlock("svg", _hoisted_1$l, _hoisted_5$3);
 }
-var closeBold = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["render", _sfc_render$a]]);
+var circlePlus = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["render", _sfc_render$a]]);
 const _sfc_main$H = defineComponent({
-  name: "EditPen"
+  name: "Edit"
 });
 const _hoisted_1$k = {
-  t: "1639990532110",
   class: "icon",
-  viewBox: "0 0 1024 1024",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg",
-  "p-id": "12171",
-  "xmlns:xlink": "http://www.w3.org/1999/xlink",
   width: "200",
-  height: "200"
+  height: "200",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
 };
 const _hoisted_2$f = /* @__PURE__ */ createElementVNode("path", {
-  d: "M199.04 672.64l193.984 112 224-387.968-193.92-112-224 388.032z m-23.872 60.16l32.896 148.288 144.896-45.696-177.792-102.592zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936-383.936 665.088h0.064l-248.448 78.336-56.448-254.336z m384 254.272v-64h448v64h-448z",
-  "p-id": "12172"
+  fill: "currentColor",
+  d: "M832 512a32 32 0 1164 0v352a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h352a32 32 0 010 64H192v640h640V512z"
+}, null, -1);
+const _hoisted_3$e = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 10-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 010 135.808l-331.84 331.84a32 32 0 01-18.112 9.088L436.8 623.68a32 32 0 01-36.224-36.224l15.104-105.6a32 32 0 019.024-18.112l331.904-331.84a96 96 0 01135.744 0z"
 }, null, -1);
-const _hoisted_3$e = [
-  _hoisted_2$f
+const _hoisted_4$5 = [
+  _hoisted_2$f,
+  _hoisted_3$e
 ];
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$k, _hoisted_3$e);
+  return openBlock(), createElementBlock("svg", _hoisted_1$k, _hoisted_4$5);
 }
-var editPen = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["render", _sfc_render$9]]);
+var edit = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["render", _sfc_render$9]]);
 const _sfc_main$G = defineComponent({
   name: "Filter"
 });
@@ -6844,8 +6824,7 @@ class TableManager extends IManager {
     __publicField(this, "randomRowKey", null);
     __publicField(this, "totalEls", []);
     __publicField(this, "focusCellKey");
-    __publicField(this, "currentRow");
-    __publicField(this, "currentColumn");
+    __publicField(this, "documentClickHandler");
     __publicField(this, "radioData", null);
     __publicField(this, "currentRenderTableEls");
     __publicField(this, "innerFilters", null);
@@ -7063,21 +7042,45 @@ class TableManager extends IManager {
       });
     }.bind(this);
   }
-  composeTableCellKey(columnKey, rowIndex) {
-    const currentPage = this.currentPage;
-    return `column-${columnKey}_${currentPage}_${rowIndex}`;
+  composeTableCellKey(columnKey, rowKey) {
+    return `cell-${columnKey}_${rowKey}`;
   }
-  blurCell(blurRowData, blurColumn) {
+  composeTableCellKeyByData(column, row) {
+    return this.composeTableCellKey(column.columnKey, row[this.rowKey]);
+  }
+  blurCell() {
     if (this.focusCellKey) {
       const cellEle = document.querySelector(`#${this.focusCellKey}`);
       cellEle.setAttribute("data-focus", "false");
-      if (cellEle.getAttribute("data-edit") === "true") {
-        const tableEl = this.currentRenderTableEls.find((el) => el._key === blurColumn.columnKey);
-        this.restoreCellValue(blurRowData, this.focusCellKey, tableEl.editData.prop || tableEl.prop);
-      }
       this.closeCellEditing(this.focusCellKey);
+      this.focusCellKey = null;
     }
   }
+  bindCellOutClickEvent() {
+    if (this.documentClickHandler) {
+      document.removeEventListener("click", this.documentClickHandler);
+    }
+    const handler = (e) => {
+      if (!this.focusCellKey) {
+        return;
+      }
+      const clickElement = e.target;
+      let isInCurrentCell = false;
+      let loopElement = clickElement;
+      while (loopElement) {
+        if (loopElement.getAttribute("cell-key") === this.focusCellKey) {
+          isInCurrentCell = true;
+          break;
+        }
+        loopElement = loopElement.parentElement;
+      }
+      if (!isInCurrentCell) {
+        this.blurCell();
+      }
+    };
+    this.documentClickHandler = handler;
+    document.addEventListener("click", handler);
+  }
   focusCell(cell) {
     if (this.focusCellKey) {
       let focusCell = cell != null ? cell : document.querySelector(`#${this.focusCellKey}`);
@@ -7100,34 +7103,32 @@ class TableManager extends IManager {
       if (!editable) {
         return false;
       }
-      const tableEl = this.currentRenderTableEls.find((el) => el._key === column.columnKey);
+      const tableEl = this.currentRenderTableEls.find(
+        (el) => el._key === column.columnKey
+      );
       if (typeof ((_a = tableEl.editData) == null ? void 0 : _a.isDisabled) === "function") {
         const isDisabled = tableEl.editData.isDisabled.call(this, row);
         if (isDisabled) {
           return false;
         }
       }
-      const rowIndex = cellInnerContainer.getAttribute("data-index");
-      const cellKey = this.composeTableCellKey(column.columnKey, rowIndex);
-      if (this.focusCellKey !== cellKey) {
-        this.blurCell(this.currentRow, this.currentColumn);
-        cell.id = this.focusCellKey = cellKey;
-        this.focusCell(cell);
-        return false;
+      const cellKey = this.composeTableCellKeyByData(column, row);
+      if (this.focusCellKey && this.focusCellKey !== cellKey) {
+        this.blurCell();
       }
-      this.currentRow = row;
-      this.currentColumn = column;
-      this.setCellEditing(cellKey);
-      this.saveRowData(cellKey, row);
+      cell.id = this.focusCellKey = cellKey;
+      this.focusCell(cell);
     }.bind(this);
+    this.bindCellOutClickEvent();
   }
   setCellEditing(cellKey) {
+    this.editableOpen.clear();
     this.editableOpen.set(cellKey, true);
-    const cellEle = document.querySelector(`#${this.focusCellKey}`);
+    const cellEle = document.querySelector(`#${cellKey}`);
     cellEle.setAttribute("data-edit", "true");
-    nextTick(() => {
+    setTimeout(() => {
       var _a;
-      (_a = cellEle.querySelector("input")) == null ? void 0 : _a.focus();
+      (_a = cellEle.querySelector("input")) == null ? void 0 : _a.click();
     });
   }
   closeCellEditing(cellKey) {
@@ -7136,7 +7137,7 @@ class TableManager extends IManager {
     cellEle.setAttribute("data-edit", "false");
   }
   saveRowData(cellKey, data) {
-    this.editableData.set(cellKey, JSON.parse(JSON.stringify(data)));
+    this.editableData.set(cellKey, JSON.stringify(data));
   }
   clearRowData(cellKey) {
     this.editableData.delete(cellKey);
@@ -7145,18 +7146,20 @@ class TableManager extends IManager {
     this.editableOpen.set(`${cellKey}-loading`, loading2);
   }
   restoreCellValue(row, cellKey, restoreKey) {
-    const originForm = this.editableData.get(cellKey);
-    row[restoreKey] = originForm[restoreKey];
+    const originFormString = this.editableData.get(cellKey);
+    try {
+      row[restoreKey] = JSON.parse(originFormString)[restoreKey];
+    } catch (error) {
+      console.log("restoreCellValue error", error);
+    }
   }
   resetTableEdit() {
     if (this.table.editable) {
       if (this.focusCellKey) {
-        this.blurCell(this.currentRow, this.currentColumn);
+        this.blurCell();
       }
       this.editableData.clear();
       this.editableOpen.clear();
-      this.currentRow = null;
-      this.currentColumn = null;
       this.focusCellKey = null;
     }
   }
@@ -7498,20 +7501,22 @@ const _sfc_main$q = defineComponent({
 });
 var index_vue_vue_type_style_index_0_lang$6 = "";
 const _hoisted_1$9 = { class: "el-table__header-cell" };
-const _hoisted_2$5 = ["data-index", "editable"];
+const _hoisted_2$5 = ["data-index", "editable", "cell-key"];
 const _hoisted_3$4 = {
   key: 0,
   class: "el-table-cell_editable"
 };
 const _hoisted_4$3 = { class: "el-table-cell_editable-inputer" };
-const _hoisted_5$2 = { class: "el-table-cell_editable-buttons" };
-const _hoisted_6$2 = ["onClick"];
-const _hoisted_7$2 = ["onClick"];
-const _hoisted_8 = {
+const _hoisted_5$2 = {
+  key: 0,
+  class: "el-table-cell_loading"
+};
+const _hoisted_6$2 = {
   key: 1,
   class: "empty-edit"
 };
-const _hoisted_9 = { key: 0 };
+const _hoisted_7$2 = { key: 0 };
+const _hoisted_8 = ["onClick"];
 const __default__$g = {
   name: "TableColumn"
 };
@@ -7526,6 +7531,13 @@ const _sfc_main$p = defineComponent({
     const tableManager = computed(() => {
       return props.context;
     });
+    const handleClickEditIcon = (column, row) => {
+      setTimeout(() => {
+        const cellKey = tableManager.value.composeTableCellKeyByData(column, row);
+        tableManager.value.setCellEditing(cellKey);
+        tableManager.value.saveRowData(cellKey, row);
+      }, 0);
+    };
     const onUpdateTableCellModelValue = (row, prop, value) => {
       row[prop] = value;
     };
@@ -7554,30 +7566,40 @@ const _sfc_main$p = defineComponent({
       let updateResult;
       props.context.setRowUpdateLoading(cellKey, true);
       try {
-        if (column.editData.api) {
-          let api = typeof column.editData.api === "function" ? column.editData.api.call(tableManager, submitData) : column.editData.api;
-          updateResult = await manager.baseUpdDataRequest(
-            api,
-            column.editData.method || tableManager.value.config.updMethod,
-            submitData
-          );
+        let updateFn;
+        if (column.editData.customUpdate) {
+          updateFn = column.editData.customUpdate.bind(tableManager, submitData);
         } else {
-          updateResult = await manager.postUpdDataRequest(submitData);
+          if (column.editData.api) {
+            let api = typeof column.editData.api === "function" ? column.editData.api.call(manager, submitData) : column.editData.api;
+            updateFn = manager.baseUpdDataRequest.bind(
+              manager,
+              api,
+              column.editData.method || tableManager.value.config.updMethod,
+              submitData
+            );
+          } else {
+            updateFn = manager.postUpdDataRequest.bind(manager, submitData);
+          }
         }
-        if (updateResult) {
+        updateResult = await updateFn();
+        if (updateResult !== false) {
           props.context.closeCellEditing(cellKey);
+          props.context.clearRowData(cellKey);
         } else {
           onCancelEditContent(row, cellKey, column.editData.prop || column.prop);
         }
       } catch (error) {
+        console.log("custom edit error", error);
+        onCancelEditContent(row, cellKey, column.editData.prop || column.prop);
       } finally {
         props.context.setRowUpdateLoading(cellKey, false);
       }
     };
+    const onCellDataChange = (row, cellKey, column) => {
+      onSaveEditContent(row, cellKey, column);
+    };
     const onCancelEditContent = (row, cellKey, restoreKey) => {
-      if (tableManager.value.editableOpen.get(`${cellKey}-loading`)) {
-        return;
-      }
       props.context.closeCellEditing(cellKey);
       props.context.restoreCellValue(row, cellKey, restoreKey);
       props.context.clearRowData(cellKey);
@@ -7598,16 +7620,16 @@ const _sfc_main$p = defineComponent({
         }, column.props), {
           header: withCtx(($header) => [
             createElementVNode("div", _hoisted_1$9, [
-              createElementVNode("span", null, toDisplayString($header.column.label || ""), 1),
-              column.helpText || column.editData || column.icon ? (openBlock(), createBlock(_component_el_icon, {
+              column.helpText || column.icon ? (openBlock(), createBlock(_component_el_icon, {
                 key: 0,
                 title: column.helpText
               }, {
                 default: withCtx(() => [
-                  column.icon ? (openBlock(), createBlock(resolveDynamicComponent(column.icon), { key: 0 })) : column.editData ? (openBlock(), createBlock(unref(editPen), { key: 1 })) : column.helpText ? (openBlock(), createBlock(unref(questionFilled), { key: 2 })) : createCommentVNode("", true)
+                  column.icon ? (openBlock(), createBlock(resolveDynamicComponent(column.icon), { key: 0 })) : column.helpText ? (openBlock(), createBlock(unref(questionFilled), { key: 1 })) : createCommentVNode("", true)
                 ]),
                 _: 2
-              }, 1032, ["title"])) : createCommentVNode("", true)
+              }, 1032, ["title"])) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString($header.column.label || ""), 1)
             ])
           ]),
           default: withCtx(({ row, $index, column: columnEl }) => [
@@ -7621,13 +7643,17 @@ const _sfc_main$p = defineComponent({
               key: 1,
               "data-index": $index,
               editable: column.editData ? 1 : 0,
+              "cell-key": tableManager.value.composeTableCellKey(columnEl.columnKey, row[tableManager.value.rowKey]),
               class: normalizeClass([
                 "el-table-cell_inner",
                 column.showRowNumbers != null ? `show-${column.showRowNumbers}` : ""
               ])
             }, [
               column.showEdit || tableManager.value.editableOpen.get(
-                tableManager.value.composeTableCellKey(columnEl.columnKey, $index)
+                tableManager.value.composeTableCellKey(
+                  columnEl.columnKey,
+                  row[tableManager.value.rowKey]
+                )
               ) ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
                 column.editData ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                   createElementVNode("div", _hoisted_4$3, [
@@ -7641,54 +7667,31 @@ const _sfc_main$p = defineComponent({
                         row,
                         column.editData.prop || column.prop,
                         $event
-                      )
-                    }, null, 8, ["modelValue", "renderFn", "context", "options", "model", "onUpdate:modelValue"])
-                  ]),
-                  createElementVNode("div", _hoisted_5$2, [
-                    !column.showEdit ? (openBlock(), createElementBlock("span", {
-                      key: 0,
-                      class: "el-table-cell_editable-button btn-save",
-                      title: "\u4FDD\u5B58",
-                      onClick: ($event) => onSaveEditContent(
+                      ),
+                      onChange: ($event) => onCellDataChange(
                         row,
-                        tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
+                        tableManager.value.composeTableCellKey(
+                          columnEl.columnKey,
+                          row[tableManager.value.rowKey]
+                        ),
                         column
                       )
-                    }, [
-                      createVNode(_component_el_icon, null, {
-                        default: withCtx(() => [
-                          tableManager.value.editableOpen.get(
-                            `${tableManager.value.composeTableCellKey(
-                              columnEl.columnKey,
-                              $index
-                            )}-loading`
-                          ) ? (openBlock(), createBlock(unref(loading), {
-                            key: 0,
-                            class: "el-table-cell_editable-icon-loading"
-                          })) : (openBlock(), createBlock(unref(select), { key: 1 }))
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ], 8, _hoisted_6$2)) : createCommentVNode("", true),
-                    !column.showEdit ? (openBlock(), createElementBlock("span", {
-                      key: 1,
-                      class: "el-table-cell_editable-button btn-cancel",
-                      title: "\u4FDD\u5B58",
-                      onClick: ($event) => onCancelEditContent(
-                        row,
-                        tableManager.value.composeTableCellKey(columnEl.columnKey, $index),
-                        column.editData.prop || column.prop
-                      )
-                    }, [
-                      createVNode(_component_el_icon, null, {
-                        default: withCtx(() => [
-                          createVNode(unref(closeBold))
-                        ]),
-                        _: 1
-                      })
-                    ], 8, _hoisted_7$2)) : createCommentVNode("", true)
-                  ])
-                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_8, "\u8BE5\u5217\u672A\u8BBE\u7F6E\u7F16\u8F91\u7EC4\u4EF6"))
+                    }, null, 8, ["modelValue", "renderFn", "context", "options", "model", "onUpdate:modelValue", "onChange"])
+                  ]),
+                  tableManager.value.editableOpen.get(
+                    tableManager.value.composeTableCellKey(
+                      columnEl.columnKey,
+                      row[tableManager.value.rowKey]
+                    ) + "-loading"
+                  ) ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+                    createVNode(_component_el_icon, { class: "is-loading" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(loading))
+                      ]),
+                      _: 1
+                    })
+                  ])) : createCommentVNode("", true)
+                ], 64)) : (openBlock(), createElementBlock("div", _hoisted_6$2, "\u8BE5\u5217\u672A\u8BBE\u7F6E\u7F16\u8F91\u7EC4\u4EF6"))
               ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 column.renderFn && $index !== -1 ? (openBlock(), createBlock(_sfc_main$q, {
                   key: 0,
@@ -7698,8 +7701,20 @@ const _sfc_main$p = defineComponent({
                   row,
                   index: $index
                 }, null, 8, ["render-fn", "context", "row", "index"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  column.prop ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(row[column.prop]), 1)) : createCommentVNode("", true)
-                ], 64))
+                  column.prop ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(row[column.prop]), 1)) : createCommentVNode("", true)
+                ], 64)),
+                column.editData ? (openBlock(), createElementBlock("span", {
+                  key: 2,
+                  class: "el-table-cell__edit-icon",
+                  onClick: ($event) => handleClickEditIcon(columnEl, row)
+                }, [
+                  createVNode(_component_el_icon, { size: 14 }, {
+                    default: withCtx(() => [
+                      createVNode(unref(edit))
+                    ]),
+                    _: 1
+                  })
+                ], 8, _hoisted_8)) : createCommentVNode("", true)
               ], 64))
             ], 10, _hoisted_2$5))
           ]),
@@ -13929,7 +13944,7 @@ const _sfc_main$4 = defineComponent({
             key: 0,
             class: normalizeClass(unref(createBEMName)("top-tabs"))
           }, [
-            hasTabs.value ? (openBlock(), createBlock(_sfc_main$Q, {
+            hasTabs.value ? (openBlock(), createBlock(_sfc_main$P, {
               key: 0,
               tabs: uConfig.value.tabs,
               manager,
@@ -14540,7 +14555,8 @@ const _sfc_main = defineComponent({
         emit("column-render", renderedTableEls.value);
       },
       {
-        deep: true
+        deep: true,
+        immediate: true
       }
     );
     const onSaveColumns = async (columns) => {
@@ -14927,12 +14943,12 @@ const _sfc_main = defineComponent({
     };
   }
 });
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0eb55d28"]]);
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-25807568"]]);
 const defineEditableTable = function(config) {
   return reactive(config);
 };
 const name = "@juzhenfe/page-model";
-const version = "3.9.36";
+const version = "3.9.38";
 const types = "dist/main.d.ts";
 const main = "dist/index.umd.js";
 const keywords = [