feat: table add expandColumnTitle slot

Author: tangjinzhou

components/table/Table.tsx

@@ -205,6 +205,7 @@ const InteralTable = defineComponent<
     'headerCell',
     'customFilterIcon',
     'customFilterDropdown',
+    'expandColumnTitle',
   ],
   setup(props, { attrs, slots, expose, emit }) {
     devWarning(

components/table/context.ts

@@ -9,6 +9,7 @@ export type ContextSlots = {
   footer?: (...args: any[]) => any;
   summary?: (...args: any[]) => any;
   bodyCell?: (...args: any[]) => any;
+  expandColumnTitle?: (...args: any[]) => any;
   headerCell?: (...args: any[]) => any;
   customFilterIcon?: (...args: any[]) => any;
   customFilterDropdown?: (...args: any[]) => any;

components/table/demo/expand.vue

@@ -17,7 +17,7 @@ When there's too much information to show and the table can't display all at onc
 </docs>
 
 <template>
-  <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }">
+  <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }" :expand-column-width="100">
     <template #bodyCell="{ column }">
       <template v-if="column.key === 'action'">
         <a>Delete</a>
@@ -28,6 +28,9 @@ When there's too much information to show and the table can't display all at onc
         {{ record.description }}
       </p>
     </template>
+    <template #expandColumnTitle>
+      <span style="color: red">More</span>
+    </template>
   </a-table>
 </template>
 <script lang="ts">

components/vc-table/hooks/useColumns.tsx

@@ -1,6 +1,6 @@
 import { warning } from '../../vc-util/warning';
 import type { ComputedRef, Ref } from 'vue';
-import { computed, watchEffect } from 'vue';
+import { renderSlot, computed, watchEffect } from 'vue';
 import type {
   ColumnsType,
   ColumnType,
@@ -13,6 +13,7 @@ import type {
 } from '../interface';
 import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
 import { EXPAND_COLUMN } from '../constant';
+import { useInjectSlots } from '../../table/context';
 
 function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
   return columns.reduce((list, column) => {
@@ -119,6 +120,7 @@ function useColumns<RecordType>(
   },
   transformColumns: Ref<(columns: ColumnsType<RecordType>) => ColumnsType<RecordType>>,
 ): [ComputedRef<ColumnsType<RecordType>>, ComputedRef<readonly ColumnType<RecordType>[]>] {
+  const contextSlots = useInjectSlots();
   // Add expand column
   const withExpandColumns = computed<ColumnsType<RecordType>>(() => {
     if (expandable.value) {
@@ -177,7 +179,7 @@ function useColumns<RecordType>(
           class: `${prefixCls.value}-expand-icon-col`,
           columnType: 'EXPAND_COLUMN',
         },
-        title: '',
+        title: renderSlot(contextSlots.value, 'expandColumnTitle', {}, () => ['']),
         fixed: fixedColumn,
         class: `${prefixCls.value}-row-expand-icon-cell`,
         width: expandColumnWidth.value,