feat(table): expand内容支持vue组件

packages/design/src/Table.vue

@@ -5,6 +5,8 @@
     v-bind="uiProps"
     @select="selectHandler"
     @sort-change="sortChangeHandler"
+    @expand-change="expandChangeHandler"
+    @cell-click="cellClickHandler"
   >
     <slot></slot>
   </component>
@@ -31,7 +33,7 @@ const uiComponent = getConfig('components').table;
 
 const uiProps = computed(() => uiComponent.props(props));
 
-const emit = defineEmits(['select', 'sort-change']);
+const emit = defineEmits(['select', 'sort-change', 'expand-change', 'cell-click']);
 
 const table = ref<any>();
 
@@ -43,6 +45,14 @@ const sortChangeHandler = (...args: any[]) => {
   emit('sort-change', ...args);
 };
 
+const expandChangeHandler = (...args: any[]) => {
+  emit('expand-change', ...args);
+};
+
+const cellClickHandler = (...args: any[]) => {
+  emit('cell-click', ...args);
+};
+
 let $el: HTMLDivElement | undefined;
 
 watchEffect(() => {

packages/table/src/ExpandColumn.vue

@@ -13,6 +13,7 @@
         :init-values="config.values || (config.prop && scope.row[config.prop]) || {}"
       ></MForm>
       <div v-if="config.expandContent" v-html="config.expandContent(scope.row, config.prop)"></div>
+      <component v-if="config.component" :is="config.component" v-bind="componentProps(scope.row)"></component>
     </template>
   </TMagicTableColumn>
 </template>
@@ -24,7 +25,7 @@ import { MForm } from '@tmagic/form';
 import { ColumnConfig } from './schema';
 import MTable from './Table.vue';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config: ColumnConfig;
   }>(),
@@ -32,4 +33,11 @@ withDefaults(
     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

@@ -17,6 +17,8 @@
     @select="selectHandler"
     @select-all="selectAllHandler"
     @selection-change="selectionChangeHandler"
+    @cell-click="cellClickHandler"
+    @expand-change="expandChange"
   >
     <template v-for="(item, columnIndex) in columns">
       <template v-if="item.type === 'expand'">
@@ -94,7 +96,15 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['sort-change', 'afterAction', 'select', 'select-all', 'selection-change']);
+const emit = defineEmits([
+  'sort-change',
+  'afterAction',
+  'select',
+  'select-all',
+  'selection-change',
+  'expand-change',
+  'cell-click',
+]);
 
 const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
@@ -141,6 +151,14 @@ const selectionChangeHandler = (selection: any) => {
   emit('selection-change', selection);
 };
 
+const cellClickHandler = (...args: any[]) => {
+  emit('cell-click', ...args);
+};
+
+const expandChange = (...args: any[]) => {
+  emit('expand-change', ...args);
+};
+
 const toggleRowSelection = (row: any, selected: boolean) => {
   tMagicTable.value?.toggleRowSelection(row, selected);
 };

packages/table/src/schema.ts

@@ -55,5 +55,10 @@ export type ColumnConfig = {
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';
   handler?: (row: any) => void;
+  /** 当type为expand时有效，展开为html */
   expandContent?: (row: any, prop?: string) => string;
+  /** 当type为expand时有效，展开为vue组件 */
+  component?: any;
+  /** 当type为expand时有效，展开的vue组件props */
+  props?: any;
 };