@tmagic/table 1.1.6 → 1.2.0-beta.10

package/dist/tmagic-table.mjs

@@ -1,86 +1,41 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, withDirectives, vShow, createVNode, createTextVNode, createCommentVNode, toDisplayString, createElementVNode, resolveDirective } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createElementVNode, vShow, createVNode, createTextVNode, createCommentVNode, toDisplayString, resolveComponent, ref, computed, resolveDirective, resolveDynamicComponent } from 'vue';
 import { cloneDeep } from 'lodash-es';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { TMagicTableColumn, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getConfig, TMagicTable } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 import { datetimeFormatter } from '@tmagic/utils';
 
-const _hoisted_1$1 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
-const _hoisted_2$1 = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _hoisted_1$1 = ["innerHTML"];
+const _hoisted_2$1 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
+const _hoisted_3$1 = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const __default__$4 = defineComponent({
+  name: "MTableActionsColumn"
+});
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "ActionsColumn",
+  ...__default__$4,
   props: {
-    columns: {
-      type: Array,
-      require: true,
-      default: () => []
-    },
-    config: {
-      type: Object,
-      require: true,
-      default: () => {
-      }
-    },
-    rowkeyName: {
-      type: String,
-      default: "c_id"
-    },
-    editState: {
-      type: Object,
-      default: () => {
-      }
-    }
+    columns: { default: () => [] },
+    config: { default: () => ({}) },
+    rowkeyName: { default: "c_id" },
+    editState: { default: () => [] }
   },
   emits: ["afterAction"],
   setup(__props, { emit }) {
     const props = __props;
     const display = (fuc, row) => {
       if (typeof fuc === "function") {
-        return fuc.call(this, this, row);
+        return fuc(row);
       }
       return true;
     };
-    const success = (msg, action, row) => {
-      ElMessage.success(msg);
-      action.after?.(row);
-    };
-    const error = (msg) => ElMessage.error(msg);
-    const deleteAction = async (action, row) => {
-      await ElMessageBox.confirm(`\u786E\u8BA4\u5220\u9664${row[action.name || "c_name"]}(${row[props.rowkeyName]})?`, "\u63D0\u793A", {
-        confirmButtonText: "\u786E\u5B9A",
-        cancelButtonText: "\u53D6\u6D88",
-        type: "warning"
-      });
-      const res = await action.handler?.(row);
-      if (res.ret === 0) {
-        success("\u5220\u9664\u6210\u529F!", action, row);
-      } else {
-        error(res.msg || "\u5220\u9664\u5931\u8D25");
-      }
-    };
-    const copyHandler = async (action, row) => {
-      await ElMessageBox.confirm(`\u786E\u5B9A\u590D\u5236${row[action.name || "c_name"]}(${row.c_id})?`, "\u63D0\u793A", {
-        confirmButtonText: "\u786E\u5B9A",
-        cancelButtonText: "\u53D6\u6D88",
-        type: "warning"
-      });
-      try {
-        const res = await action.handler?.(row);
-        if (res.ret === 0) {
-          success("\u590D\u5236\u6210\u529F!", action, row);
-        } else {
-          error(`\u590D\u5236\u5931\u8D25!${res.msg}`);
-        }
-      } catch (e) {
-        error("\u590D\u5236\u5931\u8D25!");
+    const formatter = (fuc, row) => {
+      if (typeof fuc === "function") {
+        return fuc(row);
       }
+      return fuc;
     };
     const actionHandler = async (action, row, index) => {
       await action.before?.(row);
-      if (action.type === "delete") {
-        await deleteAction(action, row);
-      } else if (action.type === "copy") {
-        await copyHandler(action, row);
-      } else if (action.type === "edit") {
+      if (action.type === "edit") {
         props.editState[index] = row;
       } else {
         await action.handler?.(row);
@@ -101,16 +56,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       });
       if (res) {
         if (res.ret === 0) {
-          ElMessage.success("\u4FDD\u5B58\u6210\u529F");
+          tMagicMessage.success("\u4FDD\u5B58\u6210\u529F");
           props.editState[index] = void 0;
           emit("afterAction");
         } else {
-          ElMessage.error({
-            duration: 1e4,
-            showClose: true,
-            dangerouslyUseHTMLString: true,
-            message: res.msg || "\u4FDD\u5B58\u5931\u8D25"
-          });
+          tMagicMessage.error(res.msg || "\u4FDD\u5B58\u5931\u8D25");
         }
       } else {
         props.editState[index] = void 0;
@@ -118,28 +68,33 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_button = resolveComponent("el-button");
-      const _component_el_table_column = resolveComponent("el-table-column");
-      return openBlock(), createBlock(_component_el_table_column, {
+      return openBlock(), createBlock(unref(TMagicTableColumn), {
         label: __props.config.label,
         width: __props.config.width,
         fixed: __props.config.fixed
       }, {
         default: withCtx((scope) => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.actions, (action, actionIndex) => {
-            return withDirectives((openBlock(), createBlock(_component_el_button, {
-              innerHTML: action.text,
+            return withDirectives((openBlock(), createBlock(unref(TMagicButton), {
               class: "action-btn",
               text: "",
               type: "primary",
               size: "small",
+              icon: action.icon,
               key: actionIndex,
               onClick: ($event) => actionHandler(action, scope.row, scope.$index)
-            }, null, 8, ["innerHTML", "onClick"])), [
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  innerHTML: formatter(action.text, scope.row)
+                }, null, 8, _hoisted_1$1)
+              ]),
+              _: 2
+            }, 1032, ["icon", "onClick"])), [
               [vShow, display(action.display, scope.row) && !__props.editState[scope.$index]]
             ]);
           }), 128)),
-          withDirectives(createVNode(_component_el_button, {
+          withDirectives(createVNode(unref(TMagicButton), {
             class: "action-btn",
             text: "",
             type: "primary",
@@ -147,13 +102,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             onClick: ($event) => save(scope.$index, __props.config)
           }, {
             default: withCtx(() => [
-              _hoisted_1$1
+              _hoisted_2$1
             ]),
             _: 2
           }, 1032, ["onClick"]), [
             [vShow, __props.editState[scope.$index]]
           ]),
-          withDirectives(createVNode(_component_el_button, {
+          withDirectives(createVNode(unref(TMagicButton), {
             class: "action-btn",
             text: "",
             type: "primary",
@@ -161,7 +116,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             onClick: ($event) => __props.editState[scope.$index] = void 0
           }, {
             default: withCtx(() => [
-              _hoisted_2$1
+              _hoisted_3$1
             ]),
             _: 2
           }, 1032, ["onClick"]), [
@@ -174,49 +129,39 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$3 = defineComponent({
-  components: { MForm },
+const __default__$3 = defineComponent({
+  name: "MTableExpandColumn"
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   props: {
-    config: {
-      type: Object,
-      default: () => ({}),
-      required: true
-    }
+    config: { default: () => ({}) }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTableColumn), { type: "expand" }, {
+        default: withCtx((scope) => [
+          __props.config.table ? (openBlock(), createBlock(_sfc_main, {
+            key: 0,
+            "show-header": false,
+            columns: __props.config.table,
+            data: __props.config.prop && scope.row[__props.config.prop] || []
+          }, null, 8, ["columns", "data"])) : createCommentVNode("", true),
+          __props.config.form ? (openBlock(), createBlock(unref(MForm), {
+            key: 1,
+            config: __props.config.form,
+            "init-values": __props.config.values || __props.config.prop && scope.row[__props.config.prop] || {}
+          }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_m_table = resolveComponent("m-table");
-  const _component_m_form = resolveComponent("m-form");
-  const _component_el_table_column = resolveComponent("el-table-column");
-  return openBlock(), createBlock(_component_el_table_column, { type: "expand" }, {
-    default: withCtx((scope) => [
-      _ctx.config.table ? (openBlock(), createBlock(_component_m_table, {
-        key: 0,
-        "show-header": false,
-        columns: _ctx.config.table,
-        data: scope.row[_ctx.config.prop]
-      }, null, 8, ["columns", "data"])) : createCommentVNode("", true),
-      _ctx.config.form ? (openBlock(), createBlock(_component_m_form, {
-        key: 1,
-        config: _ctx.config.form,
-        "init-values": _ctx.config.values || scope.row[_ctx.config.prop] || {}
-      }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
-    ]),
-    _: 1
-  });
-}
-const ExpandColumn = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-
 const formatter = (item, row) => {
+  if (!item.prop)
+    return "";
   if (item.formatter) {
     if (item.formatter === "datetime") {
       item.formatter = (value) => datetimeFormatter(value);
@@ -231,359 +176,303 @@ const formatter = (item, row) => {
   }
 };
 
-const _sfc_main$2 = defineComponent({
+const __default__$2 = defineComponent({
+  name: "MTablePopoverColumn"
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
   props: {
-    config: {
-      type: Object,
-      default: () => ({}),
-      required: true
-    }
+    config: { default: () => ({}) }
   },
-  setup() {
-    return {
-      formatter
-    };
-  }
-});
-
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_m_table = resolveComponent("m-table");
-  const _component_el_button = resolveComponent("el-button");
-  const _component_el_popover = resolveComponent("el-popover");
-  const _component_el_table_column = resolveComponent("el-table-column");
-  return openBlock(), createBlock(_component_el_table_column, {
-    label: _ctx.config.label,
-    width: _ctx.config.width,
-    fixed: _ctx.config.fixed
-  }, {
-    default: withCtx((scope) => [
-      createVNode(_component_el_popover, {
-        placement: _ctx.config.popover.placement,
-        width: _ctx.config.popover.width,
-        trigger: _ctx.config.popover.trigger
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTableColumn), {
+        label: __props.config.label,
+        width: __props.config.width,
+        fixed: __props.config.fixed
       }, {
-        reference: withCtx(() => [
-          createVNode(_component_el_button, {
-            text: "",
-            type: "primary"
+        default: withCtx((scope) => [
+          __props.config.popover ? (openBlock(), createBlock(unref(TMagicPopover), {
+            key: 0,
+            placement: __props.config.popover.placement,
+            width: __props.config.popover.width,
+            trigger: __props.config.popover.trigger
           }, {
+            reference: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                text: "",
+                type: "primary"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.config.text || unref(formatter)(__props.config, scope.row)), 1)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
             default: withCtx(() => [
-              createTextVNode(toDisplayString(_ctx.config.text || _ctx.formatter(_ctx.config, scope.row)), 1)
+              __props.config.popover.tableEmbed ? (openBlock(), createBlock(_sfc_main, {
+                key: 0,
+                "show-header": __props.config.showHeader,
+                columns: __props.config.table,
+                data: __props.config.prop && scope.row[__props.config.prop] || []
+              }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("", true)
             ]),
             _: 2
-          }, 1024)
-        ]),
-        default: withCtx(() => [
-          _ctx.config.popover.tableEmbed ? (openBlock(), createBlock(_component_m_table, {
-            key: 0,
-            "show-header": _ctx.config.showHeader,
-            columns: _ctx.config.table,
-            data: scope.row[_ctx.config.prop]
-          }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("", true)
+          }, 1032, ["placement", "width", "trigger"])) : createCommentVNode("", true)
         ]),
-        _: 2
-      }, 1032, ["placement", "width", "trigger"])
-    ]),
-    _: 1
-  }, 8, ["label", "width", "fixed"]);
-}
-const PopoverColumn = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-
-const _sfc_main$1 = defineComponent({
-  props: {
-    config: {
-      type: Object,
-      default: () => ({}),
-      required: true
-    },
-    editState: {
-      type: Object,
-      default: () => {
-      }
-    }
-  },
-  setup() {
-    return {
-      formatter
+        _: 1
+      }, 8, ["label", "width", "fixed"]);
     };
   }
 });
 
-const _hoisted_1 = ["href"];
-const _hoisted_2 = ["src"];
-const _hoisted_3 = ["href"];
-const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u6269\u5C55\u914D\u7F6E");
-const _hoisted_5 = ["innerHTML"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_m_form_container = resolveComponent("m-form-container");
-  const _component_el_form = resolveComponent("el-form");
-  const _component_el_button = resolveComponent("el-button");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  const _component_el_tag = resolveComponent("el-tag");
-  const _component_el_table_column = resolveComponent("el-table-column");
-  return openBlock(), createBlock(_component_el_table_column, {
-    "show-overflow-tooltip": "",
-    label: _ctx.config.label,
-    width: _ctx.config.width,
-    fixed: _ctx.config.fixed,
-    sortable: _ctx.config.sortable,
-    prop: _ctx.config.prop
-  }, {
-    default: withCtx((scope) => [
-      _ctx.config.type && _ctx.editState[scope.$index] ? (openBlock(), createBlock(_component_el_form, {
-        key: 0,
-        "label-width": "0",
-        model: _ctx.editState[scope.$index]
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_m_form_container, {
-            prop: _ctx.config.prop,
-            rules: _ctx.config.rules,
-            config: _ctx.config,
-            name: _ctx.config.prop,
-            model: _ctx.editState[scope.$index]
-          }, null, 8, ["prop", "rules", "config", "name", "model"])
-        ]),
-        _: 2
-      }, 1032, ["model"])) : _ctx.config.action === "actionLink" ? (openBlock(), createBlock(_component_el_button, {
-        key: 1,
-        text: "",
-        type: "primary",
-        onClick: ($event) => _ctx.config.handler(scope.row)
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
-        ]),
-        _: 2
-      }, 1032, ["onClick"])) : _ctx.config.action === "img" ? (openBlock(), createElementBlock("a", {
-        key: 2,
-        target: "_blank",
-        href: scope.row[_ctx.config.prop]
-      }, [
-        createElementVNode("img", {
-          src: scope.row[_ctx.config.prop],
-          height: "50"
-        }, null, 8, _hoisted_2)
-      ], 8, _hoisted_1)) : _ctx.config.action === "link" ? (openBlock(), createElementBlock("a", {
-        key: 3,
-        target: "_blank",
-        href: scope.row[_ctx.config.prop],
-        class: "keep-all"
-      }, toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_3)) : _ctx.config.action === "tip" ? (openBlock(), createBlock(_component_el_tooltip, {
-        key: 4,
-        placement: "left"
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = ["href"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["href"];
+const _hoisted_5 = /* @__PURE__ */ createTextVNode("\u6269\u5C55\u914D\u7F6E");
+const _hoisted_6 = ["innerHTML"];
+const __default__$1 = defineComponent({
+  name: "MTableColumn"
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: {
+    config: { default: () => ({}) },
+    editState: { default: () => ({}) }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_m_form_container = resolveComponent("m-form-container");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      return openBlock(), createBlock(unref(TMagicTableColumn), {
+        "show-overflow-tooltip": "",
+        label: __props.config.label,
+        width: __props.config.width,
+        fixed: __props.config.fixed,
+        sortable: __props.config.sortable,
+        prop: __props.config.prop
       }, {
-        content: withCtx(() => [
-          createElementVNode("div", null, toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
-        ]),
-        default: withCtx(() => [
-          createVNode(_component_el_button, {
+        default: withCtx((scope) => [
+          __props.config.type && __props.editState[scope.$index] ? (openBlock(), createBlock(unref(TMagicForm), {
+            key: 0,
+            "label-width": "0",
+            model: __props.editState[scope.$index]
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_m_form_container, {
+                prop: __props.config.prop,
+                rules: __props.config.rules,
+                config: __props.config,
+                name: __props.config.prop,
+                model: __props.editState[scope.$index]
+              }, null, 8, ["prop", "rules", "config", "name", "model"])
+            ]),
+            _: 2
+          }, 1032, ["model"])) : __props.config.action === "actionLink" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
+            key: 1,
             text: "",
-            type: "primary"
+            type: "primary",
+            onClick: ($event) => __props.config.handler?.(scope.row)
           }, {
             default: withCtx(() => [
-              _hoisted_4
+              createElementVNode("span", {
+                innerHTML: unref(formatter)(__props.config, scope.row)
+              }, null, 8, _hoisted_1)
             ]),
-            _: 1
-          })
-        ]),
-        _: 2
-      }, 1024)) : _ctx.config.action === "tag" ? (openBlock(), createBlock(_component_el_tag, {
-        key: 5,
-        type: typeof _ctx.config.type === "function" ? _ctx.config.type(scope.row[_ctx.config.prop], scope.row) : _ctx.config.type,
-        "close-transition": ""
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
+            _: 2
+          }, 1032, ["onClick"])) : __props.config.action === "img" && __props.config.prop ? (openBlock(), createElementBlock("a", {
+            key: 2,
+            target: "_blank",
+            href: scope.row[__props.config.prop]
+          }, [
+            createElementVNode("img", {
+              src: scope.row[__props.config.prop],
+              height: "50"
+            }, null, 8, _hoisted_3)
+          ], 8, _hoisted_2)) : __props.config.action === "link" && __props.config.prop ? (openBlock(), createElementBlock("a", {
+            key: 3,
+            target: "_blank",
+            href: scope.row[__props.config.prop],
+            class: "keep-all"
+          }, toDisplayString(scope.row[__props.config.prop]), 9, _hoisted_4)) : __props.config.action === "tip" ? (openBlock(), createBlock(_component_el_tooltip, {
+            key: 4,
+            placement: "left"
+          }, {
+            content: withCtx(() => [
+              createElementVNode("div", null, toDisplayString(unref(formatter)(__props.config, scope.row)), 1)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                text: "",
+                type: "primary"
+              }, {
+                default: withCtx(() => [
+                  _hoisted_5
+                ]),
+                _: 1
+              })
+            ]),
+            _: 2
+          }, 1024)) : __props.config.action === "tag" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicTag), {
+            key: 5,
+            type: typeof __props.config.type === "function" ? __props.config.type(scope.row[__props.config.prop], scope.row) : __props.config.type,
+            "close-transition": ""
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(formatter)(__props.config, scope.row)), 1)
+            ]),
+            _: 2
+          }, 1032, ["type"])) : (openBlock(), createElementBlock("div", {
+            key: 6,
+            innerHTML: unref(formatter)(__props.config, scope.row)
+          }, null, 8, _hoisted_6))
         ]),
-        _: 2
-      }, 1032, ["type"])) : (openBlock(), createElementBlock("div", {
-        key: 6,
-        innerHTML: _ctx.formatter(_ctx.config, scope.row)
-      }, null, 8, _hoisted_5))
-    ]),
-    _: 1
-  }, 8, ["label", "width", "fixed", "sortable", "prop"]);
-}
-const TextColumn = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+        _: 1
+      }, 8, ["label", "width", "fixed", "sortable", "prop"]);
+    };
+  }
+});
 
-const _sfc_main = defineComponent({
-  name: "m-table",
-  components: { ExpandColumn, ActionsColumn: _sfc_main$4, PopoverColumn, TextColumn },
+const __default__ = defineComponent({
+  name: "MTable"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
-    data: {
-      type: Array,
-      require: true
-    },
-    columns: {
-      type: Array,
-      require: true,
-      default: () => []
-    },
-    spanMethod: {
-      type: Function
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    bodyHeight: {
-      type: [String, Number]
-    },
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    emptyText: {
-      type: String
-    },
-    defaultExpandAll: {
-      type: Boolean,
-      default: false
-    },
-    rowkeyName: {
-      type: String
-    },
-    border: {
-      type: Boolean,
-      default: false
-    }
+    data: null,
+    columns: { default: () => [] },
+    spanMethod: null,
+    loading: { type: Boolean, default: false },
+    bodyHeight: null,
+    showHeader: { type: Boolean, default: true },
+    emptyText: null,
+    defaultExpandAll: { type: Boolean, default: false },
+    rowkeyName: null,
+    border: { type: Boolean, default: false }
   },
   emits: ["sort-change", "afterAction", "select", "select-all", "selection-change"],
-  data() {
-    return {
-      editState: []
-    };
-  },
-  computed: {
-    tableData() {
-      if (this.selectionColumn) {
-        return this.data || [];
-      }
-      return cloneDeep(this.data) || [];
-    },
-    selectionColumn() {
-      const column = this.columns.filter((item) => item.selection);
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const tMagicTable = ref();
+    const editState = ref([]);
+    const tableColumnComponent = getConfig("components").tableColumn;
+    const selectionColumn = computed(() => {
+      const column = props.columns.filter((item) => item.selection);
       return column.length ? column[0] : null;
-    },
-    hasBorder() {
-      return typeof this.border !== "undefined" ? this.border : true;
-    }
-  },
-  methods: {
-    sortChange(data) {
-      this.$emit("sort-change", data);
-    },
-    selectHandler(selection, row) {
-      const column = this.selectionColumn;
+    });
+    const tableData = computed(() => {
+      if (selectionColumn.value) {
+        return props.data || [];
+      }
+      return cloneDeep(props.data) || [];
+    });
+    const hasBorder = computed(() => typeof props.border !== "undefined" ? props.border : true);
+    const sortChange = (data) => {
+      emit("sort-change", data);
+    };
+    const selectHandler = (selection, row) => {
+      const column = selectionColumn.value;
       if (!column) {
         return;
       }
       if (column.selection === "single") ;
-      this.$emit("select", selection, row);
-    },
-    selectAllHandler(selection) {
-      this.$emit("select-all", selection);
-    },
-    selectionChangeHandler(selection) {
-      this.$emit("selection-change", selection);
-    },
-    toggleRowSelection(row, selected) {
-      const table = this.$refs.table;
-      table.toggleRowSelection.bind(table)(row, selected);
-    },
-    toggleRowExpansion(row, expanded) {
-      const table = this.$refs.table;
-      table.toggleRowExpansion.bind(table)(row, expanded);
-    },
-    clearSelection() {
-      const table = this.$refs.table;
-      table.clearSelection.bind(table)();
-    },
-    objectSpanMethod(data) {
-      if (typeof this.spanMethod === "function") {
-        return this.spanMethod(data);
+      emit("select", selection, row);
+    };
+    const selectAllHandler = (selection) => {
+      emit("select-all", selection);
+    };
+    const selectionChangeHandler = (selection) => {
+      emit("selection-change", selection);
+    };
+    const toggleRowSelection = (row, selected) => {
+      tMagicTable.value?.toggleRowSelection(row, selected);
+    };
+    const toggleRowExpansion = (row, expanded) => {
+      tMagicTable.value?.toggleRowExpansion(row, expanded);
+    };
+    const clearSelection = () => {
+      tMagicTable.value?.clearSelection();
+    };
+    const objectSpanMethod = (data) => {
+      if (typeof props.spanMethod === "function") {
+        return props.spanMethod(data);
       }
       return () => ({
         rowspan: 0,
         colspan: 0
       });
-    }
+    };
+    expose({
+      toggleRowSelection,
+      toggleRowExpansion,
+      clearSelection
+    });
+    return (_ctx, _cache) => {
+      const _directive_loading = resolveDirective("loading");
+      return withDirectives((openBlock(), createBlock(unref(TMagicTable), {
+        "tooltip-effect": "dark",
+        class: "m-table",
+        ref_key: "tMagicTable",
+        ref: tMagicTable,
+        data: unref(tableData),
+        "show-header": __props.showHeader,
+        "max-height": __props.bodyHeight,
+        "default-expand-all": __props.defaultExpandAll,
+        border: unref(hasBorder),
+        "row-key": __props.rowkeyName || "c_id",
+        "tree-props": { children: "children" },
+        "empty-text": __props.emptyText || "\u6682\u65E0\u6570\u636E",
+        "span-method": objectSpanMethod,
+        onSortChange: sortChange,
+        onSelect: selectHandler,
+        onSelectAll: selectAllHandler,
+        onSelectionChange: selectionChangeHandler
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (item, columnIndex) => {
+            return openBlock(), createElementBlock(Fragment, null, [
+              item.type === "expand" ? (openBlock(), createBlock(_sfc_main$3, {
+                config: item,
+                key: columnIndex
+              }, null, 8, ["config"])) : item.selection ? (openBlock(), createBlock(resolveDynamicComponent(unref(tableColumnComponent).component), {
+                width: "40",
+                type: "selection",
+                key: columnIndex,
+                selectable: item.selectable
+              }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_sfc_main$4, {
+                columns: __props.columns,
+                config: item,
+                "rowkey-name": __props.rowkeyName,
+                "edit-state": editState.value,
+                key: columnIndex,
+                onAfterAction: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("afterAction"))
+              }, null, 8, ["columns", "config", "rowkey-name", "edit-state"])) : item.type === "popover" ? (openBlock(), createBlock(_sfc_main$2, {
+                key: columnIndex,
+                config: item
+              }, null, 8, ["config"])) : (openBlock(), createBlock(_sfc_main$1, {
+                key: columnIndex,
+                config: item,
+                "edit-state": editState.value
+              }, null, 8, ["config", "edit-state"]))
+            ], 64);
+          }), 256))
+        ]),
+        _: 1
+      }, 8, ["data", "show-header", "max-height", "default-expand-all", "border", "row-key", "empty-text"])), [
+        [_directive_loading, __props.loading]
+      ]);
+    };
   }
 });
 
 const Table_vue_vue_type_style_index_0_lang = '';
 
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_expand_column = resolveComponent("expand-column");
-  const _component_el_table_column = resolveComponent("el-table-column");
-  const _component_actions_column = resolveComponent("actions-column");
-  const _component_popover_column = resolveComponent("popover-column");
-  const _component_text_column = resolveComponent("text-column");
-  const _component_el_table = resolveComponent("el-table");
-  const _directive_loading = resolveDirective("loading");
-  return withDirectives((openBlock(), createBlock(_component_el_table, {
-    "tooltip-effect": "dark",
-    class: "m-table",
-    ref: "table",
-    data: _ctx.tableData,
-    "show-header": _ctx.showHeader,
-    "max-height": _ctx.bodyHeight,
-    "default-expand-all": _ctx.defaultExpandAll,
-    border: _ctx.hasBorder,
-    "row-key": _ctx.rowkeyName || "c_id",
-    "tree-props": { children: "children" },
-    "empty-text": _ctx.emptyText || "\u6682\u65E0\u6570\u636E",
-    "span-method": _ctx.objectSpanMethod,
-    onSortChange: _ctx.sortChange,
-    onSelect: _ctx.selectHandler,
-    onSelectAll: _ctx.selectAllHandler,
-    onSelectionChange: _ctx.selectionChangeHandler
-  }, {
-    default: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (item, columnIndex) => {
-        return openBlock(), createElementBlock(Fragment, null, [
-          item.type === "expand" ? (openBlock(), createBlock(_component_expand_column, {
-            config: item,
-            key: columnIndex
-          }, null, 8, ["config"])) : item.selection ? (openBlock(), createBlock(_component_el_table_column, {
-            type: "selection",
-            key: columnIndex,
-            width: "40",
-            selectable: item.selectable
-          }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_component_actions_column, {
-            columns: _ctx.columns,
-            config: item,
-            "rowkey-name": _ctx.rowkeyName,
-            "edit-state": _ctx.editState,
-            key: columnIndex,
-            onAfterAction: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("afterAction"))
-          }, null, 8, ["columns", "config", "rowkey-name", "edit-state"])) : item.type === "popover" ? (openBlock(), createBlock(_component_popover_column, {
-            key: columnIndex,
-            config: item
-          }, null, 8, ["config"])) : (openBlock(), createBlock(_component_text_column, {
-            key: columnIndex,
-            config: item,
-            "edit-state": _ctx.editState
-          }, null, 8, ["config", "edit-state"]))
-        ], 64);
-      }), 256))
-    ]),
-    _: 1
-  }, 8, ["data", "show-header", "max-height", "default-expand-all", "border", "row-key", "empty-text", "span-method", "onSortChange", "onSelect", "onSelectAll", "onSelectionChange"])), [
-    [_directive_loading, _ctx.loading]
-  ]);
-}
-const Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-
-const components = [Table];
 const index = {
   install(app) {
-    components.forEach((component) => {
-      app.component(component.name, component);
-    });
+    app.component("m-table", _sfc_main);
   }
 };
 
-export { Table as MagicTable, index as default };
+export { _sfc_main as MagicTable, index as default };
 //# sourceMappingURL=tmagic-table.mjs.map