From bd6fae9aede8cb1513c3883a21afee17d7dfc8fd Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 25 Aug 2023 11:37:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/table/src/ComponentColumn.vue | 40 ++++++++++++++++++++++++++
 packages/table/src/Table.vue           |  5 ++++
 packages/table/src/TextColumn.vue      |  2 +-
 packages/table/src/schema.ts           |  6 ++--
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 packages/table/src/ComponentColumn.vue

diff --git a/packages/table/src/ComponentColumn.vue b/packages/table/src/ComponentColumn.vue
new file mode 100644
index 00000000..b0cf3ac0
--- /dev/null
+++ b/packages/table/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>
diff --git a/packages/table/src/Table.vue b/packages/table/src/Table.vue
index 1fccfd74..0f02e016 100644
--- a/packages/table/src/Table.vue
+++ b/packages/table/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';
diff --git a/packages/table/src/TextColumn.vue b/packages/table/src/TextColumn.vue
index 4f0a0580..551848a4 100644
--- a/packages/table/src/TextColumn.vue
+++ b/packages/table/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
diff --git a/packages/table/src/schema.ts b/packages/table/src/schema.ts
index 40f31568..5451499c 100644
--- a/packages/table/src/schema.ts
+++ b/packages/table/src/schema.ts
@@ -41,7 +41,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 +58,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;
 };