@tmagic/form 1.3.6 → 1.3.7

package/dist/style.css

@@ -124,22 +124,14 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-table.fixed {
   position: fixed;
+  height: 100%;
+  overflow: auto;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 100;
-}
-.m-fields-table.fixed::before {
-  content: " ";
-  display: block;
   background: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
 }
 .m-fields-table.fixed > .el-form-item__content {
   z-index: 101;

package/dist/tmagic-form.js

@@ -1,4 +1,4 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, resolveDirective, createSlots, withModifiers } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
 import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer } from '@tmagic/design';
@@ -166,7 +166,7 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-const _hoisted_1$e = ["id"];
+const _hoisted_1$e = ["id", "data-magic-id"];
 const _hoisted_2$8 = ["innerHTML"];
 const _hoisted_3$4 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
@@ -333,6 +333,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       return _ctx.config ? (openBlock(), createElementBlock("div", {
         key: 0,
         id: _ctx.config.id,
+        "data-magic-id": _ctx.config.id,
         style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
         class: normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
       }, [
@@ -1681,267 +1682,272 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       toggleRowSelection
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "mTable",
-        ref: mTable,
-        class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": _ctx.config.itemExtra }])
+      return openBlock(), createBlock(Teleport, {
+        to: "body",
+        disabled: !isFullscreen.value
       }, [
-        _ctx.config.extra ? (openBlock(), createElementBlock("span", {
-          key: 0,
-          style: { "color": "rgba(0, 0, 0, 0.45)" },
-          innerHTML: _ctx.config.extra
-        }, null, 8, _hoisted_1$9)) : createCommentVNode("", true),
-        createVNode(unref(TMagicTooltip), {
-          content: "拖拽可排序",
-          placement: "left-start",
-          disabled: _ctx.config.dropSort !== true
-        }, {
-          default: withCtx(() => [
-            _ctx.model[modelName.value] ? (openBlock(), createBlock(unref(TMagicTable), {
-              ref_key: "tMagicTable",
-              ref: tMagicTable,
-              style: { "width": "100%" },
-              "row-key": _ctx.config.rowKey || "id",
-              data: data.value,
-              lastData: lastData.value,
-              border: _ctx.config.border,
-              "max-height": _ctx.config.maxHeight,
-              "default-expand-all": true,
-              key: updateKey.value,
-              onSelect: selectHandle,
-              onSortChange: sortChange
-            }, {
-              default: withCtx(() => [
-                _ctx.config.itemExtra ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                  key: 0,
-                  fixed: "left",
-                  width: "30",
-                  type: "expand"
-                }, {
-                  default: withCtx((scope) => [
-                    createElementVNode("span", {
-                      innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
-                      class: "m-form-tip"
-                    }, null, 8, _hoisted_2$3)
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true),
-                createVNode(unref(TMagicTableColumn), {
-                  label: "操作",
-                  width: _ctx.config.operateColWidth || 55,
-                  align: "center",
-                  fixed: _ctx.config.fixed === false ? void 0 : "left"
-                }, {
-                  default: withCtx((scope) => [
-                    renderSlot(_ctx.$slots, "operateCol", { scope }),
-                    withDirectives(createVNode(unref(TMagicIcon), {
-                      class: "m-table-delete-icon",
-                      onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Delete))
-                      ]),
-                      _: 2
-                    }, 1032, ["onClick"]), [
-                      [vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
-                    ])
-                  ]),
-                  _: 3
-                }, 8, ["width", "fixed"]),
-                _ctx.sort && _ctx.model[modelName.value] && _ctx.model[modelName.value].length > 1 ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                  key: 1,
-                  label: "排序",
-                  width: "60"
-                }, {
-                  default: withCtx((scope) => [
-                    scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                      key: 0,
-                      content: "点击上移，双击置顶",
-                      placement: "top"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(TMagicButton), {
-                          plain: "",
-                          size: "small",
-                          type: "primary",
-                          icon: unref(ArrowUp),
-                          disabled: _ctx.disabled,
-                          text: "",
-                          onClick: ($event) => upHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
-                          onDblclick: ($event) => topHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                        }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
-                      ]),
-                      _: 2
-                    }, 1024)) : createCommentVNode("", true),
-                    scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== _ctx.model[modelName.value].length - 1 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                      key: 1,
-                      content: "点击下移，双击置底",
-                      placement: "top"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(TMagicButton), {
-                          plain: "",
-                          size: "small",
-                          type: "primary",
-                          icon: unref(ArrowDown),
-                          disabled: _ctx.disabled,
-                          text: "",
-                          onClick: ($event) => downHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
-                          onDblclick: ($event) => bottomHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                        }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
-                      ]),
-                      _: 2
-                    }, 1024)) : createCommentVNode("", true)
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true),
-                selection.value ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                  key: 2,
-                  align: "center",
-                  "header-align": "center",
-                  type: "selection",
-                  width: "45"
-                })) : createCommentVNode("", true),
-                _ctx.showIndex && _ctx.config.showIndex ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                  key: 3,
-                  width: "60",
-                  label: "序号"
-                }, {
-                  default: withCtx((scope) => [
-                    createTextVNode(toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (column, index) => {
-                  return openBlock(), createElementBlock(Fragment, null, [
-                    column.type !== "hidden" && display$1(column.display) ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                      prop: column.name,
-                      width: column.width,
-                      label: column.label,
-                      sortable: column.sortable,
-                      "sort-orders": ["ascending", "descending"],
-                      key: column[unref(mForm)?.keyProp || "__key"] ?? index,
-                      "class-name": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
-                    }, {
-                      default: withCtx((scope) => [
-                        scope.$index > -1 ? (openBlock(), createBlock(_sfc_main$z, {
-                          key: 0,
-                          labelWidth: "0",
-                          disabled: _ctx.disabled,
-                          prop: getProp(scope.$index),
-                          rules: column.rules,
-                          config: makeConfig(column, scope.row),
-                          model: scope.row,
-                          lastValues: lastData.value[scope.$index],
-                          "is-compare": _ctx.isCompare,
-                          size: _ctx.size,
-                          onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", _ctx.model[modelName.value])),
-                          onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
-                        }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : createCommentVNode("", true)
-                      ]),
-                      _: 2
-                    }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : createCommentVNode("", true)
-                  ], 64);
-                }), 256))
-              ]),
-              _: 3
-            }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["disabled"]),
-        renderSlot(_ctx.$slots, "default"),
-        createElementVNode("div", _hoisted_3, [
-          addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+        createElementVNode("div", {
+          ref_key: "mTable",
+          ref: mTable,
+          class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": _ctx.config.itemExtra }])
+        }, [
+          _ctx.config.extra ? (openBlock(), createElementBlock("span", {
             key: 0,
-            size: "small",
-            type: "primary",
-            disabled: _ctx.disabled,
-            plain: "",
-            onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
+            style: { "color": "rgba(0, 0, 0, 0.45)" },
+            innerHTML: _ctx.config.extra
+          }, null, 8, _hoisted_1$9)) : createCommentVNode("", true),
+          createVNode(unref(TMagicTooltip), {
+            content: "拖拽可排序",
+            placement: "left-start",
+            disabled: _ctx.config.dropSort !== true
           }, {
             default: withCtx(() => [
-              createTextVNode("新增一行")
+              _ctx.model[modelName.value] ? (openBlock(), createBlock(unref(TMagicTable), {
+                ref_key: "tMagicTable",
+                ref: tMagicTable,
+                style: { "width": "100%" },
+                "row-key": _ctx.config.rowKey || "id",
+                data: data.value,
+                lastData: lastData.value,
+                border: _ctx.config.border,
+                "max-height": _ctx.config.maxHeight,
+                "default-expand-all": true,
+                key: updateKey.value,
+                onSelect: selectHandle,
+                onSortChange: sortChange
+              }, {
+                default: withCtx(() => [
+                  _ctx.config.itemExtra ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    key: 0,
+                    fixed: "left",
+                    width: "30",
+                    type: "expand"
+                  }, {
+                    default: withCtx((scope) => [
+                      createElementVNode("span", {
+                        innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
+                        class: "m-form-tip"
+                      }, null, 8, _hoisted_2$3)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  createVNode(unref(TMagicTableColumn), {
+                    label: "操作",
+                    width: _ctx.config.operateColWidth || 55,
+                    align: "center",
+                    fixed: _ctx.config.fixed === false ? void 0 : "left"
+                  }, {
+                    default: withCtx((scope) => [
+                      renderSlot(_ctx.$slots, "operateCol", { scope }),
+                      withDirectives(createVNode(unref(TMagicIcon), {
+                        class: "m-table-delete-icon",
+                        onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(Delete))
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"]), [
+                        [vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["width", "fixed"]),
+                  _ctx.sort && _ctx.model[modelName.value] && _ctx.model[modelName.value].length > 1 ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    key: 1,
+                    label: "排序",
+                    width: "60"
+                  }, {
+                    default: withCtx((scope) => [
+                      scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                        key: 0,
+                        content: "点击上移，双击置顶",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TMagicButton), {
+                            plain: "",
+                            size: "small",
+                            type: "primary",
+                            icon: unref(ArrowUp),
+                            disabled: _ctx.disabled,
+                            text: "",
+                            onClick: ($event) => upHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
+                            onDblclick: ($event) => topHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                          }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true),
+                      scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== _ctx.model[modelName.value].length - 1 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                        key: 1,
+                        content: "点击下移，双击置底",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(TMagicButton), {
+                            plain: "",
+                            size: "small",
+                            type: "primary",
+                            icon: unref(ArrowDown),
+                            disabled: _ctx.disabled,
+                            text: "",
+                            onClick: ($event) => downHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
+                            onDblclick: ($event) => bottomHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                          }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  selection.value ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    key: 2,
+                    align: "center",
+                    "header-align": "center",
+                    type: "selection",
+                    width: "45"
+                  })) : createCommentVNode("", true),
+                  _ctx.showIndex && _ctx.config.showIndex ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    key: 3,
+                    width: "60",
+                    label: "序号"
+                  }, {
+                    default: withCtx((scope) => [
+                      createTextVNode(toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (column, index) => {
+                    return openBlock(), createElementBlock(Fragment, null, [
+                      column.type !== "hidden" && display$1(column.display) ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                        prop: column.name,
+                        width: column.width,
+                        label: column.label,
+                        sortable: column.sortable,
+                        "sort-orders": ["ascending", "descending"],
+                        key: column[unref(mForm)?.keyProp || "__key"] ?? index,
+                        "class-name": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
+                      }, {
+                        default: withCtx((scope) => [
+                          scope.$index > -1 ? (openBlock(), createBlock(_sfc_main$z, {
+                            key: 0,
+                            labelWidth: "0",
+                            disabled: _ctx.disabled,
+                            prop: getProp(scope.$index),
+                            rules: column.rules,
+                            config: makeConfig(column, scope.row),
+                            model: scope.row,
+                            lastValues: lastData.value[scope.$index],
+                            "is-compare": _ctx.isCompare,
+                            size: _ctx.size,
+                            onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", _ctx.model[modelName.value])),
+                            onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                          }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : createCommentVNode("", true)
+                    ], 64);
+                  }), 256))
+                ]),
+                _: 3
+              }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : createCommentVNode("", true)
             ]),
-            _: 1
-          }, 8, ["disabled"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4, [
-            _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (openBlock(), createBlock(unref(TMagicButton), {
+            _: 3
+          }, 8, ["disabled"]),
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("div", _hoisted_3, [
+            addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
               key: 0,
-              icon: unref(Grid),
               size: "small",
               type: "primary",
-              onClick: toggleMode
-            }, {
-              default: withCtx(() => [
-                createTextVNode("展开配置")
-              ]),
-              _: 1
-            }, 8, ["icon"])) : createCommentVNode("", true),
-            _ctx.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
-              key: 1,
-              icon: unref(FullScreen),
-              size: "small",
-              type: "primary",
-              onClick: toggleFullscreen
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"), 1)
-              ]),
-              _: 1
-            }, 8, ["icon"])) : createCommentVNode("", true),
-            importable.value ? (openBlock(), createBlock(unref(TMagicUpload), {
-              key: 2,
-              style: { "display": "inline-block" },
-              ref_key: "excelBtn",
-              ref: excelBtn,
-              action: "/noop",
-              disabled: _ctx.disabled,
-              "on-change": excelHandler,
-              "auto-upload": false
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(TMagicButton), {
-                  size: "small",
-                  type: "success",
-                  disabled: _ctx.disabled,
-                  plain: ""
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("导入EXCEL")
-                  ]),
-                  _: 1
-                }, 8, ["disabled"])
-              ]),
-              _: 1
-            }, 8, ["disabled"])) : createCommentVNode("", true),
-            importable.value ? (openBlock(), createBlock(unref(TMagicButton), {
-              key: 3,
-              size: "small",
-              type: "warning",
               disabled: _ctx.disabled,
               plain: "",
-              onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+              onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
             }, {
               default: withCtx(() => [
-                createTextVNode("清空")
+                createTextVNode("新增一行")
               ]),
               _: 1
-            }, 8, ["disabled"])) : createCommentVNode("", true)
-          ])
-        ]),
-        _ctx.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          createVNode(unref(TMagicPagination), {
-            layout: "total, sizes, prev, pager, next, jumper",
-            "hide-on-single-page": _ctx.model[modelName.value].length < pagesize.value,
-            "current-page": pagecontext.value + 1,
-            "page-sizes": [pagesize.value, 60, 120, 300],
-            "page-size": pagesize.value,
-            total: _ctx.model[modelName.value].length,
-            onSizeChange: handleSizeChange,
-            onCurrentChange: handleCurrentChange
-          }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total"])
-        ])) : createCommentVNode("", true)
-      ], 2);
+            }, 8, ["disabled"])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_4, [
+              _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 0,
+                icon: unref(Grid),
+                size: "small",
+                type: "primary",
+                onClick: toggleMode
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("展开配置")
+                ]),
+                _: 1
+              }, 8, ["icon"])) : createCommentVNode("", true),
+              _ctx.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 1,
+                icon: unref(FullScreen),
+                size: "small",
+                type: "primary",
+                onClick: toggleFullscreen
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"), 1)
+                ]),
+                _: 1
+              }, 8, ["icon"])) : createCommentVNode("", true),
+              importable.value ? (openBlock(), createBlock(unref(TMagicUpload), {
+                key: 2,
+                style: { "display": "inline-block" },
+                ref_key: "excelBtn",
+                ref: excelBtn,
+                action: "/noop",
+                disabled: _ctx.disabled,
+                "on-change": excelHandler,
+                "auto-upload": false
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(TMagicButton), {
+                    size: "small",
+                    type: "success",
+                    disabled: _ctx.disabled,
+                    plain: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("导入EXCEL")
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"])
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : createCommentVNode("", true),
+              importable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 3,
+                size: "small",
+                type: "warning",
+                disabled: _ctx.disabled,
+                plain: "",
+                onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("清空")
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : createCommentVNode("", true)
+            ])
+          ]),
+          _ctx.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(unref(TMagicPagination), {
+              layout: "total, sizes, prev, pager, next, jumper",
+              "hide-on-single-page": _ctx.model[modelName.value].length < pagesize.value,
+              "current-page": pagecontext.value + 1,
+              "page-sizes": [pagesize.value, 60, 120, 300],
+              "page-size": pagesize.value,
+              total: _ctx.model[modelName.value].length,
+              onSizeChange: handleSizeChange,
+              onCurrentChange: handleCurrentChange
+            }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total"])
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ], 8, ["disabled"]);
     };
   }
 });
@@ -3697,12 +3703,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       });
     }
     if (props.config.remote) {
-      const unWacth = watch(
+      const unWatch = watch(
         () => tMagicSelect.value?.scrollbarWrap,
         (scrollbarWrap) => {
           if (!scrollbarWrap) {
             return;
           }
+          nextTick(() => unWatch());
           scrollbarWrap.addEventListener("scroll", async (e) => {
             const el = e.currentTarget;
             if (moreLoadingVisible.value) {
@@ -3719,7 +3726,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             options.value = await getOptions();
             moreLoadingVisible.value = false;
           });
-          unWacth();
         },
         {
           immediate: true