@tmagic/table 1.3.0-alpha.9 → 1.3.0-beta.1

package/dist/tmagic-table.js

@@ -1,11 +1,11 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createElementVNode, vShow, createVNode, createTextVNode, createCommentVNode, resolveDynamicComponent, normalizeProps, mergeProps, toDisplayString, resolveComponent, ref, computed, resolveDirective } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, normalizeProps, guardReactiveProps, createCommentVNode, mergeProps, toDisplayString, resolveComponent, ref, computed, resolveDirective } from 'vue';
 import { cloneDeep } from 'lodash-es';
-import { TMagicTableColumn, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getConfig, TMagicTable } from '@tmagic/design';
+import { TMagicTableColumn, TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, getConfig, TMagicTable } from '@tmagic/design';
 import { MForm } from '@tmagic/form';
 import { datetimeFormatter } from '@tmagic/utils';
 
 const _hoisted_1$2 = ["innerHTML"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MTableActionsColumn"
   },
@@ -73,24 +73,33 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx((scope) => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.actions, (action, actionIndex) => {
-            return withDirectives((openBlock(), createBlock(unref(TMagicButton), {
-              class: "action-btn",
-              text: "",
-              type: action.buttonType || "primary",
-              size: "small",
-              icon: action.icon,
+            return openBlock(), createBlock(unref(TMagicTooltip), {
+              placement: action.tooltipPlacement || "top",
               key: actionIndex,
-              onClick: ($event) => actionHandler(action, scope.row, scope.$index)
+              disabled: !Boolean(action.tooltip),
+              content: action.tooltip
             }, {
               default: withCtx(() => [
-                createElementVNode("span", {
-                  innerHTML: formatter(action.text, scope.row)
-                }, null, 8, _hoisted_1$2)
+                withDirectives(createVNode(unref(TMagicButton), {
+                  class: "action-btn",
+                  text: "",
+                  size: "small",
+                  type: action.buttonType || "primary",
+                  icon: action.icon,
+                  onClick: ($event) => actionHandler(action, scope.row, scope.$index)
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", {
+                      innerHTML: formatter(action.text, scope.row)
+                    }, null, 8, _hoisted_1$2)
+                  ]),
+                  _: 2
+                }, 1032, ["type", "icon", "onClick"]), [
+                  [vShow, display(action.display, scope.row) && !_ctx.editState[scope.$index]]
+                ])
               ]),
               _: 2
-            }, 1032, ["type", "icon", "onClick"])), [
-              [vShow, display(action.display, scope.row) && !_ctx.editState[scope.$index]]
-            ]);
+            }, 1032, ["placement", "disabled", "content"]);
           }), 128)),
           withDirectives(createVNode(unref(TMagicButton), {
             class: "action-btn",
@@ -127,6 +136,40 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MTableColumn"
+  },
+  __name: "ComponentColumn",
+  props: {
+    config: { default: () => ({}) }
+  },
+  setup(__props) {
+    const props = __props;
+    const componentProps = (row) => {
+      if (typeof props.config.props === "function") {
+        return props.config.props(row) || {};
+      }
+      return props.config.props || {};
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTableColumn), {
+        "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) => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), normalizeProps(guardReactiveProps(componentProps(scope.row))), null, 16))
+        ]),
+        _: 1
+      }, 8, ["label", "width", "fixed", "sortable", "prop"]);
+    };
+  }
+});
+
 const _hoisted_1$1 = ["innerHTML"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
@@ -318,7 +361,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 type: "primary"
               }, {
                 default: withCtx(() => [
-                  createTextVNode("扩展配置")
+                  createTextVNode(toDisplayString(_ctx.config.buttonText || "扩展配置"), 1)
                 ]),
                 _: 1
               })
@@ -461,12 +504,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               item.type === "expand" ? (openBlock(), createBlock(_sfc_main$3, {
                 config: item,
                 key: columnIndex
+              }, null, 8, ["config"])) : item.type === "component" ? (openBlock(), createBlock(_sfc_main$4, {
+                config: item,
+                key: columnIndex
               }, null, 8, ["config"])) : item.selection ? (openBlock(), createBlock(resolveDynamicComponent(unref(tableColumnComponent)?.component || "el-table-column"), {
                 width: "40",
                 type: "selection",
                 key: columnIndex,
                 selectable: item.selectable
-              }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_sfc_main$4, {
+              }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_sfc_main$5, {
                 columns: _ctx.columns,
                 config: item,
                 "rowkey-name": _ctx.rowkeyName,

package/dist/tmagic-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"tmagic-table.js","sources":["../src/ActionsColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n  <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n    <template v-slot=\"scope\">\n      <TMagicButton\n        v-for=\"(action, actionIndex) in config.actions\"\n        v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n        class=\"action-btn\"\n        text\n        :type=\"action.buttonType || 'primary'\"\n        size=\"small\"\n        :icon=\"action.icon\"\n        :key=\"actionIndex\"\n        @click=\"actionHandler(action, scope.row, scope.$index)\"\n        ><span v-html=\"formatter(action.text, scope.row)\"></span\n      ></TMagicButton>\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"save(scope.$index, config)\"\n        >保存</TMagicButton\n      >\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"editState[scope.$index] = undefined\"\n        >取消</TMagicButton\n      >\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    columns: any[];\n    config: ColumnConfig;\n    rowkeyName?: string;\n    editState?: any;\n  }>(),\n  {\n    columns: () => [],\n    config: () => ({}),\n    rowkeyName: 'c_id',\n    editState: () => [],\n  },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n  await action.before?.(row, index);\n  if (action.type === 'edit') {\n    props.editState[index] = row;\n  } else {\n    await action.handler?.(row, index);\n  }\n  action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n  const action = config.actions?.find((item) => item.type === 'edit')?.action;\n  if (!action) return;\n\n  const data: any = {};\n  const row = props.editState[index];\n  props.columns\n    .filter((item) => item.type)\n    .forEach((column) => {\n      data[column.prop] = row[column.prop];\n    });\n\n  const res: any = await action({\n    data,\n  });\n\n  if (res) {\n    if (res.ret === 0) {\n      tMagicMessage.success('保存成功');\n      props.editState[index] = undefined;\n      emit('after-action');\n    } else {\n      tMagicMessage.error(res.msg || '保存失败');\n    }\n  } else {\n    props.editState[index] = undefined;\n    emit('after-action');\n  }\n};\n</script>\n","<template>\n  <TMagicTableColumn type=\"expand\">\n    <template #default=\"scope\">\n      <MTable\n        v-if=\"config.table\"\n        :show-header=\"false\"\n        :columns=\"config.table\"\n        :data=\"(config.prop && scope.row[config.prop]) || []\"\n      ></MTable>\n      <MForm\n        v-if=\"config.form\"\n        :config=\"config.form\"\n        :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n      ></MForm>\n      <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n      <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n  name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n  if (!item.prop) return '';\n\n  if (item.formatter) {\n    if (item.formatter === 'datetime') {\n      // eslint-disable-next-line no-param-reassign\n      item.formatter = (value: string) => datetimeFormatter(value);\n    }\n    try {\n      return item.formatter(row[item.prop], row);\n    } catch (e) {\n      return row[item.prop];\n    }\n  } else {\n    return row[item.prop];\n  }\n};\n","<template>\n  <TMagicTable\n    tooltip-effect=\"dark\"\n    class=\"m-table\"\n    ref=\"tMagicTable\"\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    :show-header=\"showHeader\"\n    :max-height=\"bodyHeight\"\n    :default-expand-all=\"defaultExpandAll\"\n    :border=\"hasBorder\"\n    :row-key=\"rowkeyName || 'id'\"\n    :tree-props=\"{ children: 'children' }\"\n    :empty-text=\"emptyText || '暂无数据'\"\n    :span-method=\"objectSpanMethod\"\n    @sort-change=\"sortChange\"\n    @select=\"selectHandler\"\n    @select-all=\"selectAllHandler\"\n    @selection-change=\"selectionChangeHandler\"\n    @cell-click=\"cellClickHandler\"\n    @expand-change=\"expandChange\"\n  >\n    <template v-for=\"(item, columnIndex) in columns\">\n      <template v-if=\"item.type === 'expand'\">\n        <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n      </template>\n\n      <template v-else-if=\"item.selection\">\n        <component\n          width=\"40\"\n          type=\"selection\"\n          :is=\"tableColumnComponent?.component || 'el-table-column'\"\n          :key=\"columnIndex\"\n          :selectable=\"item.selectable\"\n        ></component>\n      </template>\n\n      <template v-else-if=\"item.actions\">\n        <ActionsColumn\n          :columns=\"columns\"\n          :config=\"item\"\n          :rowkey-name=\"rowkeyName\"\n          :edit-state=\"editState\"\n          :key=\"columnIndex\"\n          @after-action=\"$emit('after-action')\"\n        ></ActionsColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'popover'\">\n        <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n      </template>\n\n      <template v-else>\n        <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n      </template>\n    </template>\n  </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n  name: 'MTable',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    data: any[];\n    columns?: any[];\n    /** 合并行或列的计算方法 */\n    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n    loading?: boolean;\n    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n    bodyHeight?: string | number;\n    /** 是否显示表头 */\n    showHeader?: boolean;\n    /** 空数据时显示的文本内容 */\n    emptyText?: string;\n    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n    defaultExpandAll?: boolean;\n    rowkeyName?: string;\n    /** 是否带有纵向边框 */\n    border?: boolean;\n  }>(),\n  {\n    columns: () => [],\n    loading: false,\n    showHeader: true,\n    defaultExpandAll: false,\n    border: false,\n  },\n);\n\nconst emit = defineEmits([\n  'sort-change',\n  'after-action',\n  'select',\n  'select-all',\n  'selection-change',\n  'expand-change',\n  'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n  const column = props.columns.filter((item) => item.selection);\n  return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n  if (selectionColumn.value) {\n    return props.data || [];\n  }\n\n  return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n  emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n  const column = selectionColumn.value;\n  if (!column) {\n    return;\n  }\n\n  if (column.selection === 'single') {\n    // this.clearSelection()\n    // this.toggleRowSelection(row, true)\n  }\n  emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n  emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n  emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n  emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n  emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n  tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n  tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n  tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n  if (typeof props.spanMethod === 'function') {\n    return props.spanMethod(data);\n  }\n  return () => ({\n    rowspan: 0,\n    colspan: 0,\n  });\n};\n\ndefineExpose({\n  toggleRowSelection,\n  toggleRowExpansion,\n  clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n  .el-button.action-btn + .el-button.action-btn {\n    margin-left: 0;\n  }\n  .keep-all {\n    word-break: keep-all;\n  }\n  .el-table .cell > div {\n    display: inline-block;\n    vertical-align: middle;\n  }\n  .el-table__row.el-table__row--level-1 {\n    color: #999;\n  }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n  install(app: App) {\n    app.component('m-table', Table);\n  },\n};\n"],"names":["Table"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+DA,IAAM,MAAA,OAAA,GAAU,CAAC,GAAA,EAAqC,GAAa,KAAA;AACjE,MAAI,IAAA,OAAO,QAAQ,UAAY,EAAA;AAC7B,QAAA,OAAO,IAAI,GAAG,CAAA,CAAA;AAAA,OAChB;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACT,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,CAAC,GAAA,EAAoC,GAAa,KAAA;AAClE,MAAI,IAAA,OAAO,QAAQ,UAAY,EAAA;AAC7B,QAAA,OAAO,IAAI,GAAG,CAAA,CAAA;AAAA,OAChB;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA,OAAO,MAA4B,EAAA,GAAA,EAAU,KAAkB,KAAA;AACnF,MAAM,MAAA,MAAA,CAAO,MAAS,GAAA,GAAA,EAAK,KAAK,CAAA,CAAA;AAChC,MAAI,IAAA,MAAA,CAAO,SAAS,MAAQ,EAAA;AAC1B,QAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,GAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAM,MAAA,MAAA,CAAO,OAAU,GAAA,GAAA,EAAK,KAAK,CAAA,CAAA;AAAA,OACnC;AACA,MAAO,MAAA,CAAA,KAAA,GAAQ,KAAK,KAAK,CAAA,CAAA;AAAA,KAC3B,CAAA;AAEA,IAAM,MAAA,IAAA,GAAO,OAAO,KAAA,EAAe,MAAyB,KAAA;AAC1D,MAAM,MAAA,MAAA,GAAS,OAAO,OAAS,EAAA,IAAA,CAAK,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA,MAAM,CAAG,EAAA,MAAA,CAAA;AACrE,MAAA,IAAI,CAAC,MAAA;AAAQ,QAAA,OAAA;AAEb,MAAA,MAAM,OAAY,EAAC,CAAA;AACnB,MAAM,MAAA,GAAA,GAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACjC,MAAM,KAAA,CAAA,OAAA,CACH,OAAO,CAAC,IAAA,KAAS,KAAK,IAAI,CAAA,CAC1B,OAAQ,CAAA,CAAC,MAAW,KAAA;AACnB,QAAA,IAAA,CAAK,MAAO,CAAA,IAAI,CAAI,GAAA,GAAA,CAAI,OAAO,IAAI,CAAA,CAAA;AAAA,OACpC,CAAA,CAAA;AAEH,MAAM,MAAA,GAAA,GAAW,MAAM,MAAO,CAAA;AAAA,QAC5B,IAAA;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,GAAK,EAAA;AACP,QAAI,IAAA,GAAA,CAAI,QAAQ,CAAG,EAAA;AACjB,UAAA,aAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;AAC5B,UAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,KAAA,CAAA,CAAA;AACzB,UAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,SACd,MAAA;AACL,UAAc,aAAA,CAAA,KAAA,CAAM,GAAI,CAAA,GAAA,IAAO,MAAM,CAAA,CAAA;AAAA,SACvC;AAAA,OACK,MAAA;AACL,QAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,KAAA,CAAA,CAAA;AACzB,QAAA,IAAA,CAAK,cAAc,CAAA,CAAA;AAAA,OACrB;AAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3EA,IAAM,MAAA,cAAA,GAAiB,CAAC,GAAa,KAAA;AACnC,MAAA,IAAI,OAAO,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,UAAY,EAAA;AAC5C,QAAA,OAAO,KAAM,CAAA,MAAA,CAAO,KAAM,CAAA,GAAG,KAAK,EAAC,CAAA;AAAA,OACrC;AACA,MAAO,OAAA,KAAA,CAAM,MAAO,CAAA,KAAA,IAAS,EAAC,CAAA;AAAA,KAChC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvBa,MAAA,SAAA,GAAY,CAAC,IAAA,EAAoB,GAAa,KAAA;AACzD,EAAA,IAAI,CAAC,IAAK,CAAA,IAAA;AAAM,IAAO,OAAA,EAAA,CAAA;AAEvB,EAAA,IAAI,KAAK,SAAW,EAAA;AAClB,IAAI,IAAA,IAAA,CAAK,cAAc,UAAY,EAAA;AAEjC,MAAA,IAAA,CAAK,SAAY,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,KAC7D;AACA,IAAI,IAAA;AACF,MAAA,OAAO,KAAK,SAAU,CAAA,GAAA,CAAI,IAAK,CAAA,IAAI,GAAG,GAAG,CAAA,CAAA;AAAA,aAClC,CAAP,EAAA;AACA,MAAO,OAAA,GAAA,CAAI,KAAK,IAAI,CAAA,CAAA;AAAA,KACtB;AAAA,GACK,MAAA;AACL,IAAO,OAAA,GAAA,CAAI,KAAK,IAAI,CAAA,CAAA;AAAA,GACtB;AACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC0EA,IAAA,MAAM,cAAc,GAAsC,EAAA,CAAA;AAE1D,IAAM,MAAA,SAAA,GAAY,GAAI,CAAA,EAAE,CAAA,CAAA;AAExB,IAAM,MAAA,oBAAA,GAAuB,SAAU,CAAA,YAAY,CAAG,EAAA,WAAA,CAAA;AACtD,IAAM,MAAA,eAAA,GAAkB,SAAS,MAAM;AACrC,MAAA,MAAM,SAAS,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAC,IAAA,KAAS,KAAK,SAAS,CAAA,CAAA;AAC5D,MAAA,OAAO,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,CAAC,CAAI,GAAA,IAAA,CAAA;AAAA,KACpC,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM;AAC/B,MAAA,IAAI,gBAAgB,KAAO,EAAA;AACzB,QAAO,OAAA,KAAA,CAAM,QAAQ,EAAC,CAAA;AAAA,OACxB;AAEA,MAAA,OAAO,SAAU,CAAA,KAAA,CAAM,IAAI,CAAA,IAAK,EAAC,CAAA;AAAA,KAClC,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,SAAS,MAAO,OAAO,MAAM,MAAW,KAAA,WAAA,GAAc,KAAM,CAAA,MAAA,GAAS,IAAK,CAAA,CAAA;AAE5F,IAAM,MAAA,UAAA,GAAa,CAAC,IAAc,KAAA;AAChC,MAAA,IAAA,CAAK,eAAe,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgB,CAAC,SAAA,EAAgB,GAAa,KAAA;AAClD,MAAA,MAAM,SAAS,eAAgB,CAAA,KAAA,CAAA;AAC/B,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AAEA,MAAI,IAAA,MAAA,CAAO,cAAc,QAAU,EAAA,CAGnC;AACA,MAAK,IAAA,CAAA,QAAA,EAAU,WAAW,GAAG,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAM,MAAA,gBAAA,GAAmB,CAAC,SAAmB,KAAA;AAC3C,MAAA,IAAA,CAAK,cAAc,SAAS,CAAA,CAAA;AAAA,KAC9B,CAAA;AAEA,IAAM,MAAA,sBAAA,GAAyB,CAAC,SAAmB,KAAA;AACjD,MAAA,IAAA,CAAK,oBAAoB,SAAS,CAAA,CAAA;AAAA,KACpC,CAAA;AAEA,IAAM,MAAA,gBAAA,GAAmB,IAAI,IAAgB,KAAA;AAC3C,MAAK,IAAA,CAAA,YAAA,EAAc,GAAG,IAAI,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,IAAI,IAAgB,KAAA;AACvC,MAAK,IAAA,CAAA,eAAA,EAAiB,GAAG,IAAI,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,GAAA,EAAU,QAAsB,KAAA;AAC1D,MAAY,WAAA,CAAA,KAAA,EAAO,kBAAmB,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAAA,KACrD,CAAA;AAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,GAAA,EAAU,QAAsB,KAAA;AAC1D,MAAY,WAAA,CAAA,KAAA,EAAO,kBAAmB,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAAA,KACrD,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,WAAA,CAAY,OAAO,cAAe,EAAA,CAAA;AAAA,KACpC,CAAA;AAEA,IAAM,MAAA,gBAAA,GAAmB,CAAC,IAAc,KAAA;AACtC,MAAI,IAAA,OAAO,KAAM,CAAA,UAAA,KAAe,UAAY,EAAA;AAC1C,QAAO,OAAA,KAAA,CAAM,WAAW,IAAI,CAAA,CAAA;AAAA,OAC9B;AACA,MAAA,OAAO,OAAO;AAAA,QACZ,OAAS,EAAA,CAAA;AAAA,QACT,OAAS,EAAA,CAAA;AAAA,OACX,CAAA,CAAA;AAAA,KACF,CAAA;AAEA,IAAa,QAAA,CAAA;AAAA,MACX,kBAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvKD,cAAe;AAAA,EACb,QAAQ,GAAU,EAAA;AAChB,IAAI,GAAA,CAAA,SAAA,CAAU,WAAWA,SAAK,CAAA,CAAA;AAAA,GAChC;AACF,CAAA;;;;"}
+{"version":3,"file":"tmagic-table.js","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n  <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n    <template v-slot=\"scope\">\n      <TMagicTooltip\n        v-for=\"(action, actionIndex) in config.actions\"\n        :placement=\"action.tooltipPlacement || 'top'\"\n        :key=\"actionIndex\"\n        :disabled=\"!Boolean(action.tooltip)\"\n        :content=\"action.tooltip\"\n      >\n        <TMagicButton\n          v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n          class=\"action-btn\"\n          text\n          size=\"small\"\n          :type=\"action.buttonType || 'primary'\"\n          :icon=\"action.icon\"\n          @click=\"actionHandler(action, scope.row, scope.$index)\"\n          ><span v-html=\"formatter(action.text, scope.row)\"></span\n        ></TMagicButton>\n      </TMagicTooltip>\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"save(scope.$index, config)\"\n        >保存</TMagicButton\n      >\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"editState[scope.$index] = undefined\"\n        >取消</TMagicButton\n      >\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    columns: any[];\n    config: ColumnConfig;\n    rowkeyName?: string;\n    editState?: any;\n  }>(),\n  {\n    columns: () => [],\n    config: () => ({}),\n    rowkeyName: 'c_id',\n    editState: () => [],\n  },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n  await action.before?.(row, index);\n  if (action.type === 'edit') {\n    props.editState[index] = row;\n  } else {\n    await action.handler?.(row, index);\n  }\n  action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n  const action = config.actions?.find((item) => item.type === 'edit')?.action;\n  if (!action) return;\n\n  const data: any = {};\n  const row = props.editState[index];\n  props.columns\n    .filter((item) => item.type)\n    .forEach((column) => {\n      data[column.prop] = row[column.prop];\n    });\n\n  const res: any = await action({\n    data,\n  });\n\n  if (res) {\n    if (res.ret === 0) {\n      tMagicMessage.success('保存成功');\n      props.editState[index] = undefined;\n      emit('after-action');\n    } else {\n      tMagicMessage.error(res.msg || '保存失败');\n    }\n  } else {\n    props.editState[index] = undefined;\n    emit('after-action');\n  }\n};\n</script>\n","<template>\n  <TMagicTableColumn\n    show-overflow-tooltip\n    :label=\"config.label\"\n    :width=\"config.width\"\n    :fixed=\"config.fixed\"\n    :sortable=\"config.sortable\"\n    :prop=\"config.prop\"\n  >\n    <template v-slot=\"scope\">\n      <component :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","<template>\n  <TMagicTableColumn type=\"expand\">\n    <template #default=\"scope\">\n      <MTable\n        v-if=\"config.table\"\n        :show-header=\"false\"\n        :columns=\"config.table\"\n        :data=\"(config.prop && scope.row[config.prop]) || []\"\n      ></MTable>\n      <MForm\n        v-if=\"config.form\"\n        :config=\"config.form\"\n        :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n      ></MForm>\n      <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n      <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n  name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n  if (!item.prop) return '';\n\n  if (item.formatter) {\n    if (item.formatter === 'datetime') {\n      // eslint-disable-next-line no-param-reassign\n      item.formatter = (value: string) => datetimeFormatter(value);\n    }\n    try {\n      return item.formatter(row[item.prop], row);\n    } catch (e) {\n      return row[item.prop];\n    }\n  } else {\n    return row[item.prop];\n  }\n};\n","<template>\n  <TMagicTable\n    tooltip-effect=\"dark\"\n    class=\"m-table\"\n    ref=\"tMagicTable\"\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    :show-header=\"showHeader\"\n    :max-height=\"bodyHeight\"\n    :default-expand-all=\"defaultExpandAll\"\n    :border=\"hasBorder\"\n    :row-key=\"rowkeyName || 'id'\"\n    :tree-props=\"{ children: 'children' }\"\n    :empty-text=\"emptyText || '暂无数据'\"\n    :span-method=\"objectSpanMethod\"\n    @sort-change=\"sortChange\"\n    @select=\"selectHandler\"\n    @select-all=\"selectAllHandler\"\n    @selection-change=\"selectionChangeHandler\"\n    @cell-click=\"cellClickHandler\"\n    @expand-change=\"expandChange\"\n  >\n    <template v-for=\"(item, columnIndex) in columns\">\n      <template v-if=\"item.type === 'expand'\">\n        <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'component'\">\n        <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n      </template>\n\n      <template v-else-if=\"item.selection\">\n        <component\n          width=\"40\"\n          type=\"selection\"\n          :is=\"tableColumnComponent?.component || 'el-table-column'\"\n          :key=\"columnIndex\"\n          :selectable=\"item.selectable\"\n        ></component>\n      </template>\n\n      <template v-else-if=\"item.actions\">\n        <ActionsColumn\n          :columns=\"columns\"\n          :config=\"item\"\n          :rowkey-name=\"rowkeyName\"\n          :edit-state=\"editState\"\n          :key=\"columnIndex\"\n          @after-action=\"$emit('after-action')\"\n        ></ActionsColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'popover'\">\n        <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n      </template>\n\n      <template v-else>\n        <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n      </template>\n    </template>\n  </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n  name: 'MTable',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    data: any[];\n    columns?: any[];\n    /** 合并行或列的计算方法 */\n    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n    loading?: boolean;\n    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n    bodyHeight?: string | number;\n    /** 是否显示表头 */\n    showHeader?: boolean;\n    /** 空数据时显示的文本内容 */\n    emptyText?: string;\n    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n    defaultExpandAll?: boolean;\n    rowkeyName?: string;\n    /** 是否带有纵向边框 */\n    border?: boolean;\n  }>(),\n  {\n    columns: () => [],\n    loading: false,\n    showHeader: true,\n    defaultExpandAll: false,\n    border: false,\n  },\n);\n\nconst emit = defineEmits([\n  'sort-change',\n  'after-action',\n  'select',\n  'select-all',\n  'selection-change',\n  'expand-change',\n  'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n  const column = props.columns.filter((item) => item.selection);\n  return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n  if (selectionColumn.value) {\n    return props.data || [];\n  }\n\n  return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n  emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n  const column = selectionColumn.value;\n  if (!column) {\n    return;\n  }\n\n  if (column.selection === 'single') {\n    // this.clearSelection()\n    // this.toggleRowSelection(row, true)\n  }\n  emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n  emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n  emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n  emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n  emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n  tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n  tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n  tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n  if (typeof props.spanMethod === 'function') {\n    return props.spanMethod(data);\n  }\n  return () => ({\n    rowspan: 0,\n    colspan: 0,\n  });\n};\n\ndefineExpose({\n  toggleRowSelection,\n  toggleRowExpansion,\n  clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n  .el-button.action-btn + .el-button.action-btn {\n    margin-left: 0;\n  }\n  .keep-all {\n    word-break: keep-all;\n  }\n  .el-table .cell > div {\n    display: inline-block;\n    vertical-align: middle;\n  }\n  .el-table__row.el-table__row--level-1 {\n    color: #999;\n  }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n  install(app: App) {\n    app.component('m-table', Table);\n  },\n};\n"],"names":["Table"],"mappings":"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"}

package/dist/tmagic-table.umd.cjs

@@ -5,7 +5,7 @@
 })(this, (function (exports, vue, lodashEs, design, form, utils) { 'use strict';
 
   const _hoisted_1$2 = ["innerHTML"];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MTableActionsColumn"
     },
@@ -73,24 +73,33 @@
         }, {
           default: vue.withCtx((scope) => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.actions, (action, actionIndex) => {
-              return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                class: "action-btn",
-                text: "",
-                type: action.buttonType || "primary",
-                size: "small",
-                icon: action.icon,
+              return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                placement: action.tooltipPlacement || "top",
                 key: actionIndex,
-                onClick: ($event) => actionHandler(action, scope.row, scope.$index)
+                disabled: !Boolean(action.tooltip),
+                content: action.tooltip
               }, {
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("span", {
-                    innerHTML: formatter(action.text, scope.row)
-                  }, null, 8, _hoisted_1$2)
+                  vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
+                    class: "action-btn",
+                    text: "",
+                    size: "small",
+                    type: action.buttonType || "primary",
+                    icon: action.icon,
+                    onClick: ($event) => actionHandler(action, scope.row, scope.$index)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("span", {
+                        innerHTML: formatter(action.text, scope.row)
+                      }, null, 8, _hoisted_1$2)
+                    ]),
+                    _: 2
+                  }, 1032, ["type", "icon", "onClick"]), [
+                    [vue.vShow, display(action.display, scope.row) && !_ctx.editState[scope.$index]]
+                  ])
                 ]),
                 _: 2
-              }, 1032, ["type", "icon", "onClick"])), [
-                [vue.vShow, display(action.display, scope.row) && !_ctx.editState[scope.$index]]
-              ]);
+              }, 1032, ["placement", "disabled", "content"]);
             }), 128)),
             vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
               class: "action-btn",
@@ -127,6 +136,40 @@
     }
   });
 
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MTableColumn"
+    },
+    __name: "ComponentColumn",
+    props: {
+      config: { default: () => ({}) }
+    },
+    setup(__props) {
+      const props = __props;
+      const componentProps = (row) => {
+        if (typeof props.config.props === "function") {
+          return props.config.props(row) || {};
+        }
+        return props.config.props || {};
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+          "show-overflow-tooltip": "",
+          label: _ctx.config.label,
+          width: _ctx.config.width,
+          fixed: _ctx.config.fixed,
+          sortable: _ctx.config.sortable,
+          prop: _ctx.config.prop
+        }, {
+          default: vue.withCtx((scope) => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.normalizeProps(vue.guardReactiveProps(componentProps(scope.row))), null, 16))
+          ]),
+          _: 1
+        }, 8, ["label", "width", "fixed", "sortable", "prop"]);
+      };
+    }
+  });
+
   const _hoisted_1$1 = ["innerHTML"];
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -318,7 +361,7 @@
                   type: "primary"
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createTextVNode("扩展配置")
+                    vue.createTextVNode(vue.toDisplayString(_ctx.config.buttonText || "扩展配置"), 1)
                   ]),
                   _: 1
                 })
@@ -461,12 +504,15 @@
                 item.type === "expand" ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
                   config: item,
                   key: columnIndex
+                }, null, 8, ["config"])) : item.type === "component" ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+                  config: item,
+                  key: columnIndex
                 }, null, 8, ["config"])) : item.selection ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tableColumnComponent)?.component || "el-table-column"), {
                   width: "40",
                   type: "selection",
                   key: columnIndex,
                   selectable: item.selectable
-                }, null, 8, ["selectable"])) : item.actions ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+                }, null, 8, ["selectable"])) : item.actions ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
                   columns: _ctx.columns,
                   config: item,
                   "rowkey-name": _ctx.rowkeyName,

package/dist/tmagic-table.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tmagic-table.umd.cjs","sources":["../src/ActionsColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n  <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n    <template v-slot=\"scope\">\n      <TMagicButton\n        v-for=\"(action, actionIndex) in config.actions\"\n        v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n        class=\"action-btn\"\n        text\n        :type=\"action.buttonType || 'primary'\"\n        size=\"small\"\n        :icon=\"action.icon\"\n        :key=\"actionIndex\"\n        @click=\"actionHandler(action, scope.row, scope.$index)\"\n        ><span v-html=\"formatter(action.text, scope.row)\"></span\n      ></TMagicButton>\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"save(scope.$index, config)\"\n        >保存</TMagicButton\n      >\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"editState[scope.$index] = undefined\"\n        >取消</TMagicButton\n      >\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    columns: any[];\n    config: ColumnConfig;\n    rowkeyName?: string;\n    editState?: any;\n  }>(),\n  {\n    columns: () => [],\n    config: () => ({}),\n    rowkeyName: 'c_id',\n    editState: () => [],\n  },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n  await action.before?.(row, index);\n  if (action.type === 'edit') {\n    props.editState[index] = row;\n  } else {\n    await action.handler?.(row, index);\n  }\n  action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n  const action = config.actions?.find((item) => item.type === 'edit')?.action;\n  if (!action) return;\n\n  const data: any = {};\n  const row = props.editState[index];\n  props.columns\n    .filter((item) => item.type)\n    .forEach((column) => {\n      data[column.prop] = row[column.prop];\n    });\n\n  const res: any = await action({\n    data,\n  });\n\n  if (res) {\n    if (res.ret === 0) {\n      tMagicMessage.success('保存成功');\n      props.editState[index] = undefined;\n      emit('after-action');\n    } else {\n      tMagicMessage.error(res.msg || '保存失败');\n    }\n  } else {\n    props.editState[index] = undefined;\n    emit('after-action');\n  }\n};\n</script>\n","<template>\n  <TMagicTableColumn type=\"expand\">\n    <template #default=\"scope\">\n      <MTable\n        v-if=\"config.table\"\n        :show-header=\"false\"\n        :columns=\"config.table\"\n        :data=\"(config.prop && scope.row[config.prop]) || []\"\n      ></MTable>\n      <MForm\n        v-if=\"config.form\"\n        :config=\"config.form\"\n        :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n      ></MForm>\n      <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n      <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n  name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n  if (!item.prop) return '';\n\n  if (item.formatter) {\n    if (item.formatter === 'datetime') {\n      // eslint-disable-next-line no-param-reassign\n      item.formatter = (value: string) => datetimeFormatter(value);\n    }\n    try {\n      return item.formatter(row[item.prop], row);\n    } catch (e) {\n      return row[item.prop];\n    }\n  } else {\n    return row[item.prop];\n  }\n};\n","<template>\n  <TMagicTable\n    tooltip-effect=\"dark\"\n    class=\"m-table\"\n    ref=\"tMagicTable\"\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    :show-header=\"showHeader\"\n    :max-height=\"bodyHeight\"\n    :default-expand-all=\"defaultExpandAll\"\n    :border=\"hasBorder\"\n    :row-key=\"rowkeyName || 'id'\"\n    :tree-props=\"{ children: 'children' }\"\n    :empty-text=\"emptyText || '暂无数据'\"\n    :span-method=\"objectSpanMethod\"\n    @sort-change=\"sortChange\"\n    @select=\"selectHandler\"\n    @select-all=\"selectAllHandler\"\n    @selection-change=\"selectionChangeHandler\"\n    @cell-click=\"cellClickHandler\"\n    @expand-change=\"expandChange\"\n  >\n    <template v-for=\"(item, columnIndex) in columns\">\n      <template v-if=\"item.type === 'expand'\">\n        <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n      </template>\n\n      <template v-else-if=\"item.selection\">\n        <component\n          width=\"40\"\n          type=\"selection\"\n          :is=\"tableColumnComponent?.component || 'el-table-column'\"\n          :key=\"columnIndex\"\n          :selectable=\"item.selectable\"\n        ></component>\n      </template>\n\n      <template v-else-if=\"item.actions\">\n        <ActionsColumn\n          :columns=\"columns\"\n          :config=\"item\"\n          :rowkey-name=\"rowkeyName\"\n          :edit-state=\"editState\"\n          :key=\"columnIndex\"\n          @after-action=\"$emit('after-action')\"\n        ></ActionsColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'popover'\">\n        <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n      </template>\n\n      <template v-else>\n        <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n      </template>\n    </template>\n  </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n  name: 'MTable',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    data: any[];\n    columns?: any[];\n    /** 合并行或列的计算方法 */\n    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n    loading?: boolean;\n    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n    bodyHeight?: string | number;\n    /** 是否显示表头 */\n    showHeader?: boolean;\n    /** 空数据时显示的文本内容 */\n    emptyText?: string;\n    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n    defaultExpandAll?: boolean;\n    rowkeyName?: string;\n    /** 是否带有纵向边框 */\n    border?: boolean;\n  }>(),\n  {\n    columns: () => [],\n    loading: false,\n    showHeader: true,\n    defaultExpandAll: false,\n    border: false,\n  },\n);\n\nconst emit = defineEmits([\n  'sort-change',\n  'after-action',\n  'select',\n  'select-all',\n  'selection-change',\n  'expand-change',\n  'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n  const column = props.columns.filter((item) => item.selection);\n  return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n  if (selectionColumn.value) {\n    return props.data || [];\n  }\n\n  return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n  emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n  const column = selectionColumn.value;\n  if (!column) {\n    return;\n  }\n\n  if (column.selection === 'single') {\n    // this.clearSelection()\n    // this.toggleRowSelection(row, true)\n  }\n  emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n  emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n  emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n  emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n  emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n  tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n  tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n  tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n  if (typeof props.spanMethod === 'function') {\n    return props.spanMethod(data);\n  }\n  return () => ({\n    rowspan: 0,\n    colspan: 0,\n  });\n};\n\ndefineExpose({\n  toggleRowSelection,\n  toggleRowExpansion,\n  clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n  .el-button.action-btn + .el-button.action-btn {\n    margin-left: 0;\n  }\n  .keep-all {\n    word-break: keep-all;\n  }\n  .el-table .cell > div {\n    display: inline-block;\n    vertical-align: middle;\n  }\n  .el-table__row.el-table__row--level-1 {\n    color: #999;\n  }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n  install(app: App) {\n    app.component('m-table', Table);\n  },\n};\n"],"names":["tMagicMessage","datetimeFormatter","ref","getConfig","computed","cloneDeep","Table"],"mappings":"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"}
+{"version":3,"file":"tmagic-table.umd.cjs","sources":["../src/ActionsColumn.vue","../src/ComponentColumn.vue","../src/ExpandColumn.vue","../src/utils.ts","../src/Table.vue","../src/index.ts"],"sourcesContent":["<template>\n  <TMagicTableColumn :label=\"config.label\" :width=\"config.width\" :fixed=\"config.fixed\">\n    <template v-slot=\"scope\">\n      <TMagicTooltip\n        v-for=\"(action, actionIndex) in config.actions\"\n        :placement=\"action.tooltipPlacement || 'top'\"\n        :key=\"actionIndex\"\n        :disabled=\"!Boolean(action.tooltip)\"\n        :content=\"action.tooltip\"\n      >\n        <TMagicButton\n          v-show=\"display(action.display, scope.row) && !editState[scope.$index]\"\n          class=\"action-btn\"\n          text\n          size=\"small\"\n          :type=\"action.buttonType || 'primary'\"\n          :icon=\"action.icon\"\n          @click=\"actionHandler(action, scope.row, scope.$index)\"\n          ><span v-html=\"formatter(action.text, scope.row)\"></span\n        ></TMagicButton>\n      </TMagicTooltip>\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"save(scope.$index, config)\"\n        >保存</TMagicButton\n      >\n      <TMagicButton\n        class=\"action-btn\"\n        v-show=\"editState[scope.$index]\"\n        text\n        type=\"primary\"\n        size=\"small\"\n        @click=\"editState[scope.$index] = undefined\"\n        >取消</TMagicButton\n      >\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';\n\nimport { ColumnActionConfig, ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableActionsColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    columns: any[];\n    config: ColumnConfig;\n    rowkeyName?: string;\n    editState?: any;\n  }>(),\n  {\n    columns: () => [],\n    config: () => ({}),\n    rowkeyName: 'c_id',\n    editState: () => [],\n  },\n);\n\nconst emit = defineEmits(['after-action']);\n\nconst display = (fuc: boolean | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return true;\n};\n\nconst formatter = (fuc: string | Function | undefined, row: any) => {\n  if (typeof fuc === 'function') {\n    return fuc(row);\n  }\n  return fuc;\n};\n\nconst actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {\n  await action.before?.(row, index);\n  if (action.type === 'edit') {\n    props.editState[index] = row;\n  } else {\n    await action.handler?.(row, index);\n  }\n  action.after?.(row, index);\n};\n\nconst save = async (index: number, config: ColumnConfig) => {\n  const action = config.actions?.find((item) => item.type === 'edit')?.action;\n  if (!action) return;\n\n  const data: any = {};\n  const row = props.editState[index];\n  props.columns\n    .filter((item) => item.type)\n    .forEach((column) => {\n      data[column.prop] = row[column.prop];\n    });\n\n  const res: any = await action({\n    data,\n  });\n\n  if (res) {\n    if (res.ret === 0) {\n      tMagicMessage.success('保存成功');\n      props.editState[index] = undefined;\n      emit('after-action');\n    } else {\n      tMagicMessage.error(res.msg || '保存失败');\n    }\n  } else {\n    props.editState[index] = undefined;\n    emit('after-action');\n  }\n};\n</script>\n","<template>\n  <TMagicTableColumn\n    show-overflow-tooltip\n    :label=\"config.label\"\n    :width=\"config.width\"\n    :fixed=\"config.fixed\"\n    :sortable=\"config.sortable\"\n    :prop=\"config.prop\"\n  >\n    <template v-slot=\"scope\">\n      <component :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\n\nimport { ColumnConfig } from './schema';\n\ndefineOptions({\n  name: 'MTableColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","<template>\n  <TMagicTableColumn type=\"expand\">\n    <template #default=\"scope\">\n      <MTable\n        v-if=\"config.table\"\n        :show-header=\"false\"\n        :columns=\"config.table\"\n        :data=\"(config.prop && scope.row[config.prop]) || []\"\n      ></MTable>\n      <MForm\n        v-if=\"config.form\"\n        :config=\"config.form\"\n        :init-values=\"config.values || (config.prop && scope.row[config.prop]) || {}\"\n      ></MForm>\n      <div v-if=\"config.expandContent\" v-html=\"config.expandContent(scope.row, config.prop)\"></div>\n      <component v-if=\"config.component\" :is=\"config.component\" v-bind=\"componentProps(scope.row)\"></component>\n    </template>\n  </TMagicTableColumn>\n</template>\n\n<script lang=\"ts\" setup>\nimport { TMagicTableColumn } from '@tmagic/design';\nimport { MForm } from '@tmagic/form';\n\nimport { ColumnConfig } from './schema';\nimport MTable from './Table.vue';\n\ndefineOptions({\n  name: 'MTableExpandColumn',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    config: ColumnConfig;\n  }>(),\n  {\n    config: () => ({}),\n  },\n);\n\nconst componentProps = (row: any) => {\n  if (typeof props.config.props === 'function') {\n    return props.config.props(row) || {};\n  }\n  return props.config.props || {};\n};\n</script>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { datetimeFormatter } from '@tmagic/utils';\n\nimport { ColumnConfig } from './schema';\n\nexport const formatter = (item: ColumnConfig, row: any) => {\n  if (!item.prop) return '';\n\n  if (item.formatter) {\n    if (item.formatter === 'datetime') {\n      // eslint-disable-next-line no-param-reassign\n      item.formatter = (value: string) => datetimeFormatter(value);\n    }\n    try {\n      return item.formatter(row[item.prop], row);\n    } catch (e) {\n      return row[item.prop];\n    }\n  } else {\n    return row[item.prop];\n  }\n};\n","<template>\n  <TMagicTable\n    tooltip-effect=\"dark\"\n    class=\"m-table\"\n    ref=\"tMagicTable\"\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    :show-header=\"showHeader\"\n    :max-height=\"bodyHeight\"\n    :default-expand-all=\"defaultExpandAll\"\n    :border=\"hasBorder\"\n    :row-key=\"rowkeyName || 'id'\"\n    :tree-props=\"{ children: 'children' }\"\n    :empty-text=\"emptyText || '暂无数据'\"\n    :span-method=\"objectSpanMethod\"\n    @sort-change=\"sortChange\"\n    @select=\"selectHandler\"\n    @select-all=\"selectAllHandler\"\n    @selection-change=\"selectionChangeHandler\"\n    @cell-click=\"cellClickHandler\"\n    @expand-change=\"expandChange\"\n  >\n    <template v-for=\"(item, columnIndex) in columns\">\n      <template v-if=\"item.type === 'expand'\">\n        <ExpandColumn :config=\"item\" :key=\"columnIndex\"></ExpandColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'component'\">\n        <ComponentColumn :config=\"item\" :key=\"columnIndex\"></ComponentColumn>\n      </template>\n\n      <template v-else-if=\"item.selection\">\n        <component\n          width=\"40\"\n          type=\"selection\"\n          :is=\"tableColumnComponent?.component || 'el-table-column'\"\n          :key=\"columnIndex\"\n          :selectable=\"item.selectable\"\n        ></component>\n      </template>\n\n      <template v-else-if=\"item.actions\">\n        <ActionsColumn\n          :columns=\"columns\"\n          :config=\"item\"\n          :rowkey-name=\"rowkeyName\"\n          :edit-state=\"editState\"\n          :key=\"columnIndex\"\n          @after-action=\"$emit('after-action')\"\n        ></ActionsColumn>\n      </template>\n\n      <template v-else-if=\"item.type === 'popover'\">\n        <PopoverColumn :key=\"columnIndex\" :config=\"item\"></PopoverColumn>\n      </template>\n\n      <template v-else>\n        <TextColumn :key=\"columnIndex\" :config=\"item\" :edit-state=\"editState\"></TextColumn>\n      </template>\n    </template>\n  </TMagicTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { cloneDeep } from 'lodash-es';\n\nimport { getConfig, TMagicTable } from '@tmagic/design';\n\nimport ActionsColumn from './ActionsColumn.vue';\nimport ComponentColumn from './ComponentColumn.vue';\nimport ExpandColumn from './ExpandColumn.vue';\nimport PopoverColumn from './PopoverColumn.vue';\nimport TextColumn from './TextColumn.vue';\n\ndefineOptions({\n  name: 'MTable',\n});\n\nconst props = withDefaults(\n  defineProps<{\n    data: any[];\n    columns?: any[];\n    /** 合并行或列的计算方法 */\n    spanMethod?: (data: { row: any; column: any; rowIndex: number; columnIndex: number }) => [number, number];\n    loading?: boolean;\n    /** Table 的最大高度。合法的值为数字或者单位为 px 的高度 */\n    bodyHeight?: string | number;\n    /** 是否显示表头 */\n    showHeader?: boolean;\n    /** 空数据时显示的文本内容 */\n    emptyText?: string;\n    /** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 */\n    defaultExpandAll?: boolean;\n    rowkeyName?: string;\n    /** 是否带有纵向边框 */\n    border?: boolean;\n  }>(),\n  {\n    columns: () => [],\n    loading: false,\n    showHeader: true,\n    defaultExpandAll: false,\n    border: false,\n  },\n);\n\nconst emit = defineEmits([\n  'sort-change',\n  'after-action',\n  'select',\n  'select-all',\n  'selection-change',\n  'expand-change',\n  'cell-click',\n]);\n\nconst tMagicTable = ref<InstanceType<typeof TMagicTable>>();\n\nconst editState = ref([]);\n\nconst tableColumnComponent = getConfig('components')?.tableColumn;\nconst selectionColumn = computed(() => {\n  const column = props.columns.filter((item) => item.selection);\n  return column.length ? column[0] : null;\n});\n\nconst tableData = computed(() => {\n  if (selectionColumn.value) {\n    return props.data || [];\n  }\n\n  return cloneDeep(props.data) || [];\n});\n\nconst hasBorder = computed(() => (typeof props.border !== 'undefined' ? props.border : true));\n\nconst sortChange = (data: any) => {\n  emit('sort-change', data);\n};\n\nconst selectHandler = (selection: any, row: any) => {\n  const column = selectionColumn.value;\n  if (!column) {\n    return;\n  }\n\n  if (column.selection === 'single') {\n    // this.clearSelection()\n    // this.toggleRowSelection(row, true)\n  }\n  emit('select', selection, row);\n};\n\nconst selectAllHandler = (selection: any) => {\n  emit('select-all', selection);\n};\n\nconst selectionChangeHandler = (selection: any) => {\n  emit('selection-change', selection);\n};\n\nconst cellClickHandler = (...args: any[]) => {\n  emit('cell-click', ...args);\n};\n\nconst expandChange = (...args: any[]) => {\n  emit('expand-change', ...args);\n};\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n  tMagicTable.value?.toggleRowSelection(row, selected);\n};\n\nconst toggleRowExpansion = (row: any, expanded: boolean) => {\n  tMagicTable.value?.toggleRowExpansion(row, expanded);\n};\n\nconst clearSelection = () => {\n  tMagicTable.value?.clearSelection();\n};\n\nconst objectSpanMethod = (data: any) => {\n  if (typeof props.spanMethod === 'function') {\n    return props.spanMethod(data);\n  }\n  return () => ({\n    rowspan: 0,\n    colspan: 0,\n  });\n};\n\ndefineExpose({\n  toggleRowSelection,\n  toggleRowExpansion,\n  clearSelection,\n});\n</script>\n\n<style lang=\"scss\">\n.m-table {\n  .el-button.action-btn + .el-button.action-btn {\n    margin-left: 0;\n  }\n  .keep-all {\n    word-break: keep-all;\n  }\n  .el-table .cell > div {\n    display: inline-block;\n    vertical-align: middle;\n  }\n  .el-table__row.el-table__row--level-1 {\n    color: #999;\n  }\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { App } from 'vue';\n\nimport Table from './Table.vue';\n\nexport { default as MagicTable } from './Table.vue';\n\nexport default {\n  install(app: App) {\n    app.component('m-table', Table);\n  },\n};\n"],"names":["tMagicMessage","datetimeFormatter","ref","getConfig","computed","cloneDeep","Table"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAqEA,IAAM,MAAA,OAAA,GAAU,CAAC,GAAA,EAAqC,GAAa,KAAA;EACjE,MAAI,IAAA,OAAO,QAAQ,UAAY,EAAA;EAC7B,QAAA,OAAO,IAAI,GAAG,CAAA,CAAA;EAAA,OAChB;EACA,MAAO,OAAA,IAAA,CAAA;EAAA,KACT,CAAA;EAEA,IAAM,MAAA,SAAA,GAAY,CAAC,GAAA,EAAoC,GAAa,KAAA;EAClE,MAAI,IAAA,OAAO,QAAQ,UAAY,EAAA;EAC7B,QAAA,OAAO,IAAI,GAAG,CAAA,CAAA;EAAA,OAChB;EACA,MAAO,OAAA,GAAA,CAAA;EAAA,KACT,CAAA;EAEA,IAAA,MAAM,aAAgB,GAAA,OAAO,MAA4B,EAAA,GAAA,EAAU,KAAkB,KAAA;EACnF,MAAM,MAAA,MAAA,CAAO,MAAS,GAAA,GAAA,EAAK,KAAK,CAAA,CAAA;EAChC,MAAI,IAAA,MAAA,CAAO,SAAS,MAAQ,EAAA;EAC1B,QAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,GAAA,CAAA;EAAA,OACpB,MAAA;EACL,QAAM,MAAA,MAAA,CAAO,OAAU,GAAA,GAAA,EAAK,KAAK,CAAA,CAAA;EAAA,OACnC;EACA,MAAO,MAAA,CAAA,KAAA,GAAQ,KAAK,KAAK,CAAA,CAAA;EAAA,KAC3B,CAAA;EAEA,IAAM,MAAA,IAAA,GAAO,OAAO,KAAA,EAAe,MAAyB,KAAA;EAC1D,MAAM,MAAA,MAAA,GAAS,OAAO,OAAS,EAAA,IAAA,CAAK,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA,MAAM,CAAG,EAAA,MAAA,CAAA;EACrE,MAAA,IAAI,CAAC,MAAA;EAAQ,QAAA,OAAA;EAEb,MAAA,MAAM,OAAY,EAAC,CAAA;EACnB,MAAM,MAAA,GAAA,GAAM,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;EACjC,MAAM,KAAA,CAAA,OAAA,CACH,OAAO,CAAC,IAAA,KAAS,KAAK,IAAI,CAAA,CAC1B,OAAQ,CAAA,CAAC,MAAW,KAAA;EACnB,QAAA,IAAA,CAAK,MAAO,CAAA,IAAI,CAAI,GAAA,GAAA,CAAI,OAAO,IAAI,CAAA,CAAA;EAAA,OACpC,CAAA,CAAA;EAEH,MAAM,MAAA,GAAA,GAAW,MAAM,MAAO,CAAA;EAAA,QAC5B,IAAA;EAAA,OACD,CAAA,CAAA;EAED,MAAA,IAAI,GAAK,EAAA;EACP,QAAI,IAAA,GAAA,CAAI,QAAQ,CAAG,EAAA;EACjB,UAAAA,oBAAA,CAAc,QAAQ,MAAM,CAAA,CAAA;EAC5B,UAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,KAAA,CAAA,CAAA;EACzB,UAAA,IAAA,CAAK,cAAc,CAAA,CAAA;EAAA,SACd,MAAA;EACL,UAAcA,oBAAA,CAAA,KAAA,CAAM,GAAI,CAAA,GAAA,IAAO,MAAM,CAAA,CAAA;EAAA,SACvC;EAAA,OACK,MAAA;EACL,QAAM,KAAA,CAAA,SAAA,CAAU,KAAK,CAAI,GAAA,KAAA,CAAA,CAAA;EACzB,QAAA,IAAA,CAAK,cAAc,CAAA,CAAA;EAAA,OACrB;EAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECxFA,IAAM,MAAA,cAAA,GAAiB,CAAC,GAAa,KAAA;EACnC,MAAA,IAAI,OAAO,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,UAAY,EAAA;EAC5C,QAAA,OAAO,KAAM,CAAA,MAAA,CAAO,KAAM,CAAA,GAAG,KAAK,EAAC,CAAA;EAAA,OACrC;EACA,MAAO,OAAA,KAAA,CAAM,MAAO,CAAA,KAAA,IAAS,EAAC,CAAA;EAAA,KAChC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECEA,IAAM,MAAA,cAAA,GAAiB,CAAC,GAAa,KAAA;EACnC,MAAA,IAAI,OAAO,KAAA,CAAM,MAAO,CAAA,KAAA,KAAU,UAAY,EAAA;EAC5C,QAAA,OAAO,KAAM,CAAA,MAAA,CAAO,KAAM,CAAA,GAAG,KAAK,EAAC,CAAA;EAAA,OACrC;EACA,MAAO,OAAA,KAAA,CAAM,MAAO,CAAA,KAAA,IAAS,EAAC,CAAA;EAAA,KAChC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ECvBa,MAAA,SAAA,GAAY,CAAC,IAAA,EAAoB,GAAa,KAAA;EACzD,EAAA,IAAI,CAAC,IAAK,CAAA,IAAA;EAAM,IAAO,OAAA,EAAA,CAAA;EAEvB,EAAA,IAAI,KAAK,SAAW,EAAA;EAClB,IAAI,IAAA,IAAA,CAAK,cAAc,UAAY,EAAA;EAEjC,MAAA,IAAA,CAAK,SAAY,GAAA,CAAC,KAAkB,KAAAC,uBAAA,CAAkB,KAAK,CAAA,CAAA;EAAA,KAC7D;EACA,IAAI,IAAA;EACF,MAAA,OAAO,KAAK,SAAU,CAAA,GAAA,CAAI,IAAK,CAAA,IAAI,GAAG,GAAG,CAAA,CAAA;EAAA,aAClC,CAAG,EAAA;EACV,MAAO,OAAA,GAAA,CAAI,KAAK,IAAI,CAAA,CAAA;EAAA,KACtB;EAAA,GACK,MAAA;EACL,IAAO,OAAA,GAAA,CAAI,KAAK,IAAI,CAAA,CAAA;EAAA,GACtB;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC+EA,IAAA,MAAM,cAAcC,OAAsC,EAAA,CAAA;EAE1D,IAAM,MAAA,SAAA,GAAYA,OAAI,CAAA,EAAE,CAAA,CAAA;EAExB,IAAM,MAAA,oBAAA,GAAuBC,gBAAU,CAAA,YAAY,CAAG,EAAA,WAAA,CAAA;EACtD,IAAM,MAAA,eAAA,GAAkBC,aAAS,MAAM;EACrC,MAAA,MAAM,SAAS,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAC,IAAA,KAAS,KAAK,SAAS,CAAA,CAAA;EAC5D,MAAA,OAAO,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,CAAC,CAAI,GAAA,IAAA,CAAA;EAAA,KACpC,CAAA,CAAA;EAED,IAAM,MAAA,SAAA,GAAYA,aAAS,MAAM;EAC/B,MAAA,IAAI,gBAAgB,KAAO,EAAA;EACzB,QAAO,OAAA,KAAA,CAAM,QAAQ,EAAC,CAAA;EAAA,OACxB;EAEA,MAAA,OAAOC,kBAAU,CAAA,KAAA,CAAM,IAAI,CAAA,IAAK,EAAC,CAAA;EAAA,KAClC,CAAA,CAAA;EAED,IAAM,MAAA,SAAA,GAAYD,aAAS,MAAO,OAAO,MAAM,MAAW,KAAA,WAAA,GAAc,KAAM,CAAA,MAAA,GAAS,IAAK,CAAA,CAAA;EAE5F,IAAM,MAAA,UAAA,GAAa,CAAC,IAAc,KAAA;EAChC,MAAA,IAAA,CAAK,eAAe,IAAI,CAAA,CAAA;EAAA,KAC1B,CAAA;EAEA,IAAM,MAAA,aAAA,GAAgB,CAAC,SAAA,EAAgB,GAAa,KAAA;EAClD,MAAA,MAAM,SAAS,eAAgB,CAAA,KAAA,CAAA;EAC/B,MAAA,IAAI,CAAC,MAAQ,EAAA;EACX,QAAA,OAAA;EAAA,OACF;EAEA,MAAI,IAAA,MAAA,CAAO,cAAc,QAAU,EAAA,CAGnC;EACA,MAAK,IAAA,CAAA,QAAA,EAAU,WAAW,GAAG,CAAA,CAAA;EAAA,KAC/B,CAAA;EAEA,IAAM,MAAA,gBAAA,GAAmB,CAAC,SAAmB,KAAA;EAC3C,MAAA,IAAA,CAAK,cAAc,SAAS,CAAA,CAAA;EAAA,KAC9B,CAAA;EAEA,IAAM,MAAA,sBAAA,GAAyB,CAAC,SAAmB,KAAA;EACjD,MAAA,IAAA,CAAK,oBAAoB,SAAS,CAAA,CAAA;EAAA,KACpC,CAAA;EAEA,IAAM,MAAA,gBAAA,GAAmB,IAAI,IAAgB,KAAA;EAC3C,MAAK,IAAA,CAAA,YAAA,EAAc,GAAG,IAAI,CAAA,CAAA;EAAA,KAC5B,CAAA;EAEA,IAAM,MAAA,YAAA,GAAe,IAAI,IAAgB,KAAA;EACvC,MAAK,IAAA,CAAA,eAAA,EAAiB,GAAG,IAAI,CAAA,CAAA;EAAA,KAC/B,CAAA;EAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,GAAA,EAAU,QAAsB,KAAA;EAC1D,MAAY,WAAA,CAAA,KAAA,EAAO,kBAAmB,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;EAAA,KACrD,CAAA;EAEA,IAAM,MAAA,kBAAA,GAAqB,CAAC,GAAA,EAAU,QAAsB,KAAA;EAC1D,MAAY,WAAA,CAAA,KAAA,EAAO,kBAAmB,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;EAAA,KACrD,CAAA;EAEA,IAAA,MAAM,iBAAiB,MAAM;EAC3B,MAAA,WAAA,CAAY,OAAO,cAAe,EAAA,CAAA;EAAA,KACpC,CAAA;EAEA,IAAM,MAAA,gBAAA,GAAmB,CAAC,IAAc,KAAA;EACtC,MAAI,IAAA,OAAO,KAAM,CAAA,UAAA,KAAe,UAAY,EAAA;EAC1C,QAAO,OAAA,KAAA,CAAM,WAAW,IAAI,CAAA,CAAA;EAAA,OAC9B;EACA,MAAA,OAAO,OAAO;EAAA,QACZ,OAAS,EAAA,CAAA;EAAA,QACT,OAAS,EAAA,CAAA;EAAA,OACX,CAAA,CAAA;EAAA,KACF,CAAA;EAEA,IAAa,QAAA,CAAA;EAAA,MACX,kBAAA;EAAA,MACA,kBAAA;EAAA,MACA,cAAA;EAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5KD,gBAAe;EAAA,EACb,QAAQ,GAAU,EAAA;EAChB,IAAI,GAAA,CAAA,SAAA,CAAU,WAAWE,SAAK,CAAA,CAAA;EAAA,GAChC;EACF,CAAA;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.9",
+  "version": "1.3.0-beta.1",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -33,14 +33,14 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/design": "1.3.0-alpha.9",
-    "@tmagic/form": "1.3.0-alpha.9",
-    "@tmagic/utils": "1.3.0-alpha.9",
+    "@tmagic/design": "1.3.0-beta.1",
+    "@tmagic/form": "1.3.0-beta.1",
+    "@tmagic/utils": "1.3.0-beta.1",
     "lodash-es": "^4.17.21",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.3.0-alpha.9",
+    "@tmagic/form": "1.3.0-beta.1",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
+    "vite": "^4.4.4",
     "vue-tsc": "^1.6.5"
   }
 }

package/src/ActionsColumn.vue

@@ -1,18 +1,24 @@
 <template>
   <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
     <template v-slot="scope">
-      <TMagicButton
+      <TMagicTooltip
         v-for="(action, actionIndex) in config.actions"
-        v-show="display(action.display, scope.row) && !editState[scope.$index]"
-        class="action-btn"
-        text
-        :type="action.buttonType || 'primary'"
-        size="small"
-        :icon="action.icon"
+        :placement="action.tooltipPlacement || 'top'"
         :key="actionIndex"
-        @click="actionHandler(action, scope.row, scope.$index)"
-        ><span v-html="formatter(action.text, scope.row)"></span
-      ></TMagicButton>
+        :disabled="!Boolean(action.tooltip)"
+        :content="action.tooltip"
+      >
+        <TMagicButton
+          v-show="display(action.display, scope.row) && !editState[scope.$index]"
+          class="action-btn"
+          text
+          size="small"
+          :type="action.buttonType || 'primary'"
+          :icon="action.icon"
+          @click="actionHandler(action, scope.row, scope.$index)"
+          ><span v-html="formatter(action.text, scope.row)"></span
+        ></TMagicButton>
+      </TMagicTooltip>
       <TMagicButton
         class="action-btn"
         v-show="editState[scope.$index]"
@@ -36,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
 

package/src/ComponentColumn.vue

@@ -0,0 +1,40 @@
+<template>
+  <TMagicTableColumn
+    show-overflow-tooltip
+    :label="config.label"
+    :width="config.width"
+    :fixed="config.fixed"
+    :sortable="config.sortable"
+    :prop="config.prop"
+  >
+    <template v-slot="scope">
+      <component :is="config.component" v-bind="componentProps(scope.row)"></component>
+    </template>
+  </TMagicTableColumn>
+</template>
+
+<script lang="ts" setup>
+import { TMagicTableColumn } from '@tmagic/design';
+
+import { ColumnConfig } from './schema';
+
+defineOptions({
+  name: 'MTableColumn',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: ColumnConfig;
+  }>(),
+  {
+    config: () => ({}),
+  },
+);
+
+const componentProps = (row: any) => {
+  if (typeof props.config.props === 'function') {
+    return props.config.props(row) || {};
+  }
+  return props.config.props || {};
+};
+</script>

package/src/Table.vue

@@ -25,6 +25,10 @@
         <ExpandColumn :config="item" :key="columnIndex"></ExpandColumn>
       </template>
 
+      <template v-else-if="item.type === 'component'">
+        <ComponentColumn :config="item" :key="columnIndex"></ComponentColumn>
+      </template>
+
       <template v-else-if="item.selection">
         <component
           width="40"
@@ -64,6 +68,7 @@ import { cloneDeep } from 'lodash-es';
 import { getConfig, TMagicTable } from '@tmagic/design';
 
 import ActionsColumn from './ActionsColumn.vue';
+import ComponentColumn from './ComponentColumn.vue';
 import ExpandColumn from './ExpandColumn.vue';
 import PopoverColumn from './PopoverColumn.vue';
 import TextColumn from './TextColumn.vue';

package/src/TextColumn.vue

@@ -43,7 +43,7 @@
         <template #content>
           <div>{{ formatter(config, scope.row) }}</div>
         </template>
-        <TMagicButton text type="primary">扩展配置</TMagicButton>
+        <TMagicButton text type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
       </el-tooltip>
 
       <TMagicTag

package/src/schema.ts

@@ -24,6 +24,8 @@ export interface ColumnActionConfig {
   display?: (row: any) => boolean;
   text: string | ((row: any) => string);
   name: string;
+  tooltip?: string;
+  tooltipPlacement?: string;
   icon?: any;
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => void;
@@ -41,7 +43,7 @@ export type ColumnConfig = {
   fixed?: 'left' | 'right' | boolean;
   width?: number | string;
   actions?: ColumnActionConfig[];
-  type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+  type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: any) => string);
   text?: string;
   prop?: string;
   showHeader?: boolean;
@@ -58,8 +60,10 @@ export type ColumnConfig = {
   handler?: (row: any) => void;
   /** 当type为expand时有效，展开为html */
   expandContent?: (row: any, prop?: string) => string;
-  /** 当type为expand时有效，展开为vue组件 */
+  /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
   component?: any;
   /** 当type为expand时有效，展开的vue组件props */
   props?: any;
+  /** 当type为tip时有效，显示文案 */
+  buttonText?: string;
 };

package/types/ComponentColumn.vue.d.ts

@@ -0,0 +1,30 @@
+import { ColumnConfig } from './schema';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: ColumnConfig;
+}>, {
+    config: () => {};
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config: ColumnConfig;
+}>, {
+    config: () => {};
+}>>>, {
+    config: ColumnConfig;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/schema.d.ts

@@ -5,6 +5,8 @@ export interface ColumnActionConfig {
     display?: (row: any) => boolean;
     text: string | ((row: any) => string);
     name: string;
+    tooltip?: string;
+    tooltipPlacement?: string;
     icon?: any;
     handler?: (row: any, index: number) => Promise<any> | any;
     before?: (row: any, index: number) => void;
@@ -23,7 +25,7 @@ export type ColumnConfig = {
     fixed?: 'left' | 'right' | boolean;
     width?: number | string;
     actions?: ColumnActionConfig[];
-    type?: 'popover' | 'expand' | string | ((value: any, row: any) => string);
+    type?: 'popover' | 'expand' | 'component' | string | ((value: any, row: any) => string);
     text?: string;
     prop?: string;
     showHeader?: boolean;
@@ -40,8 +42,10 @@ export type ColumnConfig = {
     handler?: (row: any) => void;
     /** 当type为expand时有效，展开为html */
     expandContent?: (row: any, prop?: string) => string;
-    /** 当type为expand时有效，展开为vue组件 */
+    /** 当type为expand时，展开为vue组件；当type为component时显示的组件 */
     component?: any;
     /** 当type为expand时有效，展开的vue组件props */
     props?: any;
+    /** 当type为tip时有效，显示文案 */
+    buttonText?: string;
 };