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