feat(table): 新增支持配置组件

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>

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';

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

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;
 };