@tmagic/form 1.3.6 → 1.3.7

package/dist/tmagic-form.umd.cjs

@@ -165,7 +165,7 @@
     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"];
@@ -332,6 +332,7 @@
         return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           id: _ctx.config.id,
+          "data-magic-id": _ctx.config.id,
           style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
           class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
         }, [
@@ -1680,267 +1681,272 @@
         toggleRowSelection
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "mTable",
-          ref: mTable,
-          class: vue.normalizeClass(["m-fields-table", { "m-fields-table-item-extra": _ctx.config.itemExtra }])
+        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !isFullscreen.value
         }, [
-          _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 0,
-            style: { "color": "rgba(0, 0, 0, 0.45)" },
-            innerHTML: _ctx.config.extra
-          }, null, 8, _hoisted_1$9)) : vue.createCommentVNode("", true),
-          vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: "拖拽可排序",
-            placement: "left-start",
-            disabled: _ctx.config.dropSort !== true
-          }, {
-            default: vue.withCtx(() => [
-              _ctx.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-                  _ctx.config.itemExtra ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                    key: 0,
-                    fixed: "left",
-                    width: "30",
-                    type: "expand"
-                  }, {
-                    default: vue.withCtx((scope) => [
-                      vue.createElementVNode("span", {
-                        innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
-                        class: "m-form-tip"
-                      }, null, 8, _hoisted_2$3)
-                    ]),
-                    _: 1
-                  })) : vue.createCommentVNode("", true),
-                  vue.createVNode(vue.unref(design.TMagicTableColumn), {
-                    label: "操作",
-                    width: _ctx.config.operateColWidth || 55,
-                    align: "center",
-                    fixed: _ctx.config.fixed === false ? void 0 : "left"
-                  }, {
-                    default: vue.withCtx((scope) => [
-                      vue.renderSlot(_ctx.$slots, "operateCol", { scope }),
-                      vue.withDirectives(vue.createVNode(vue.unref(design.TMagicIcon), {
-                        class: "m-table-delete-icon",
-                        onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.Delete))
-                        ]),
-                        _: 2
-                      }, 1032, ["onClick"]), [
-                        [vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                    key: 1,
-                    label: "排序",
-                    width: "60"
-                  }, {
-                    default: vue.withCtx((scope) => [
-                      scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                        key: 0,
-                        content: "点击上移，双击置顶",
-                        placement: "top"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(design.TMagicButton), {
-                            plain: "",
-                            size: "small",
-                            type: "primary",
-                            icon: vue.unref(iconsVue.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)) : vue.createCommentVNode("", true),
-                      scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== _ctx.model[modelName.value].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                        key: 1,
-                        content: "点击下移，双击置底",
-                        placement: "top"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(design.TMagicButton), {
-                            plain: "",
-                            size: "small",
-                            type: "primary",
-                            icon: vue.unref(iconsVue.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)) : vue.createCommentVNode("", true)
-                    ]),
-                    _: 1
-                  })) : vue.createCommentVNode("", true),
-                  selection.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                    key: 2,
-                    align: "center",
-                    "header-align": "center",
-                    type: "selection",
-                    width: "45"
-                  })) : vue.createCommentVNode("", true),
-                  _ctx.showIndex && _ctx.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                    key: 3,
-                    width: "60",
-                    label: "序号"
-                  }, {
-                    default: vue.withCtx((scope) => [
-                      vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
-                    ]),
-                    _: 1
-                  })) : vue.createCommentVNode("", true),
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (column, index) => {
-                    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                      column.type !== "hidden" && display$1(column.display) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                        prop: column.name,
-                        width: column.width,
-                        label: column.label,
-                        sortable: column.sortable,
-                        "sort-orders": ["ascending", "descending"],
-                        key: column[vue.unref(mForm)?.keyProp || "__key"] ?? index,
-                        "class-name": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
-                      }, {
-                        default: vue.withCtx((scope) => [
-                          scope.$index > -1 ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
-                    ], 64);
-                  }), 256))
-                ]),
-                _: 3
-              }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("", true)
-            ]),
-            _: 3
-          }, 8, ["disabled"]),
-          vue.renderSlot(_ctx.$slots, "default"),
-          vue.createElementVNode("div", _hoisted_3, [
-            addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          vue.createElementVNode("div", {
+            ref_key: "mTable",
+            ref: mTable,
+            class: vue.normalizeClass(["m-fields-table", { "m-fields-table-item-extra": _ctx.config.itemExtra }])
+          }, [
+            _ctx.config.extra ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "拖拽可排序",
+              placement: "left-start",
+              disabled: _ctx.config.dropSort !== true
             }, {
               default: vue.withCtx(() => [
-                vue.createTextVNode("新增一行")
+                _ctx.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
+                    _ctx.config.itemExtra ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 0,
+                      fixed: "left",
+                      width: "30",
+                      type: "expand"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        vue.createElementVNode("span", {
+                          innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
+                          class: "m-form-tip"
+                        }, null, 8, _hoisted_2$3)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    vue.createVNode(vue.unref(design.TMagicTableColumn), {
+                      label: "操作",
+                      width: _ctx.config.operateColWidth || 55,
+                      align: "center",
+                      fixed: _ctx.config.fixed === false ? void 0 : "left"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        vue.renderSlot(_ctx.$slots, "operateCol", { scope }),
+                        vue.withDirectives(vue.createVNode(vue.unref(design.TMagicIcon), {
+                          class: "m-table-delete-icon",
+                          onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.Delete))
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"]), [
+                          [vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 1,
+                      label: "排序",
+                      width: "60"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                          key: 0,
+                          content: "点击上移，双击置顶",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(design.TMagicButton), {
+                              plain: "",
+                              size: "small",
+                              type: "primary",
+                              icon: vue.unref(iconsVue.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)) : vue.createCommentVNode("", true),
+                        scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== _ctx.model[modelName.value].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                          key: 1,
+                          content: "点击下移，双击置底",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(design.TMagicButton), {
+                              plain: "",
+                              size: "small",
+                              type: "primary",
+                              icon: vue.unref(iconsVue.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)) : vue.createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    selection.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 2,
+                      align: "center",
+                      "header-align": "center",
+                      type: "selection",
+                      width: "45"
+                    })) : vue.createCommentVNode("", true),
+                    _ctx.showIndex && _ctx.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 3,
+                      width: "60",
+                      label: "序号"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (column, index) => {
+                      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                        column.type !== "hidden" && display$1(column.display) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                          prop: column.name,
+                          width: column.width,
+                          label: column.label,
+                          sortable: column.sortable,
+                          "sort-orders": ["ascending", "descending"],
+                          key: column[vue.unref(mForm)?.keyProp || "__key"] ?? index,
+                          "class-name": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
+                        }, {
+                          default: vue.withCtx((scope) => [
+                            scope.$index > -1 ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+                          ]),
+                          _: 2
+                        }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
+                      ], 64);
+                    }), 256))
+                  ]),
+                  _: 3
+                }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("", true)
               ]),
-              _: 1
-            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_4, [
-              _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              _: 3
+            }, 8, ["disabled"]),
+            vue.renderSlot(_ctx.$slots, "default"),
+            vue.createElementVNode("div", _hoisted_3, [
+              addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                 key: 0,
-                icon: vue.unref(iconsVue.Grid),
                 size: "small",
                 type: "primary",
-                onClick: toggleMode
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode("展开配置")
-                ]),
-                _: 1
-              }, 8, ["icon"])) : vue.createCommentVNode("", true),
-              _ctx.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                key: 1,
-                icon: vue.unref(iconsVue.FullScreen),
-                size: "small",
-                type: "primary",
-                onClick: toggleFullscreen
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"), 1)
-                ]),
-                _: 1
-              }, 8, ["icon"])) : vue.createCommentVNode("", true),
-              importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
-                key: 2,
-                style: { "display": "inline-block" },
-                ref_key: "excelBtn",
-                ref: excelBtn,
-                action: "/noop",
-                disabled: _ctx.disabled,
-                "on-change": excelHandler,
-                "auto-upload": false
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(design.TMagicButton), {
-                    size: "small",
-                    type: "success",
-                    disabled: _ctx.disabled,
-                    plain: ""
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("导入EXCEL")
-                    ]),
-                    _: 1
-                  }, 8, ["disabled"])
-                ]),
-                _: 1
-              }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-              importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-                  vue.createTextVNode("清空")
+                  vue.createTextVNode("新增一行")
                 ]),
                 _: 1
-              }, 8, ["disabled"])) : vue.createCommentVNode("", true)
-            ])
-          ]),
-          _ctx.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-            vue.createVNode(vue.unref(design.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"])
-          ])) : vue.createCommentVNode("", true)
-        ], 2);
+              }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_4, [
+                _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  key: 0,
+                  icon: vue.unref(iconsVue.Grid),
+                  size: "small",
+                  type: "primary",
+                  onClick: toggleMode
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("展开配置")
+                  ]),
+                  _: 1
+                }, 8, ["icon"])) : vue.createCommentVNode("", true),
+                _ctx.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  key: 1,
+                  icon: vue.unref(iconsVue.FullScreen),
+                  size: "small",
+                  type: "primary",
+                  onClick: toggleFullscreen
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["icon"])) : vue.createCommentVNode("", true),
+                importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
+                  key: 2,
+                  style: { "display": "inline-block" },
+                  ref_key: "excelBtn",
+                  ref: excelBtn,
+                  action: "/noop",
+                  disabled: _ctx.disabled,
+                  "on-change": excelHandler,
+                  "auto-upload": false
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(design.TMagicButton), {
+                      size: "small",
+                      type: "success",
+                      disabled: _ctx.disabled,
+                      plain: ""
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("导入EXCEL")
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"])
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+                importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  key: 3,
+                  size: "small",
+                  type: "warning",
+                  disabled: _ctx.disabled,
+                  plain: "",
+                  onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("清空")
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            _ctx.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+              vue.createVNode(vue.unref(design.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"])
+            ])) : vue.createCommentVNode("", true)
+          ], 2)
+        ], 8, ["disabled"]);
       };
     }
   });
@@ -3696,12 +3702,13 @@
         });
       }
       if (props.config.remote) {
-        const unWacth = vue.watch(
+        const unWatch = vue.watch(
           () => tMagicSelect.value?.scrollbarWrap,
           (scrollbarWrap) => {
             if (!scrollbarWrap) {
               return;
             }
+            vue.nextTick(() => unWatch());
             scrollbarWrap.addEventListener("scroll", async (e) => {
               const el = e.currentTarget;
               if (moreLoadingVisible.value) {
@@ -3718,7 +3725,6 @@
               options.value = await getOptions();
               moreLoadingVisible.value = false;
             });
-            unWacth();
           },
           {
             immediate: true