feat(table): formatter添加index信息

Tencent · Feb 18, 2025 · 4d77b66 · 4d77b66
1 parent 6f2c6b1
commit 4d77b66
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/packages/table/src/PopoverColumn.vue b/packages/table/src/PopoverColumn.vue
@@ -16,7 +16,9 @@
           :data="(config.prop && scope.row[config.prop]) || []"
         ></MTable>
         <template #reference>
-          <TMagicButton link type="primary"> {{ config.text || formatter(config, scope.row) }}</TMagicButton>
+          <TMagicButton link type="primary">
+            {{ config.text || formatter(config, scope.row, { index: scope.$index }) }}</TMagicButton
+          >
         </template>
       </TMagicPopover>
     </template>

diff --git a/packages/table/src/TextColumn.vue b/packages/table/src/TextColumn.vue
@@ -29,7 +29,7 @@
         type="primary"
         @click="config.handler?.(scope.row)"
       >
-        <span v-html="formatter(config, scope.row)"></span>
+        <span v-html="formatter(config, scope.row, { index: scope.$index })"></span>
       </TMagicButton>
 
       <a v-else-if="config.action === 'img' && config.prop" target="_blank" :href="scope.row[config.prop]"
@@ -46,7 +46,7 @@
 
       <el-tooltip v-else-if="config.action === 'tip'" placement="left">
         <template #content>
-          <div>{{ formatter(config, scope.row) }}</div>
+          <div>{{ formatter(config, scope.row, { index: scope.$index }) }}</div>
         </template>
         <TMagicButton link type="primary">{{ config.buttonText || '扩展配置' }}</TMagicButton>
       </el-tooltip>
@@ -55,9 +55,9 @@
         v-else-if="config.action === 'tag' && config.prop"
         :type="typeof config.type === 'function' ? config.type(scope.row[config.prop], scope.row) : config.type"
         close-transition
-        >{{ formatter(config, scope.row) }}</TMagicTag
+        >{{ formatter(config, scope.row, { index: scope.$index }) }}</TMagicTag
       >
-      <div v-else v-html="formatter(config, scope.row)"></div>
+      <div v-else v-html="formatter(config, scope.row, { index: scope.$index })"></div>
     </template>
   </TMagicTableColumn>
 </template>

diff --git a/packages/table/src/schema.ts b/packages/table/src/schema.ts
@@ -51,7 +51,7 @@ export interface ColumnConfig<T = any> {
   name?: string;
   showHeader?: boolean;
   table?: ColumnConfig[];
-  formatter?: 'datetime' | ((item: any, row: T) => any);
+  formatter?: 'datetime' | ((item: any, row: T, data: { index: number }) => any);
   popover?: {
     placement?:
       | 'auto'

diff --git a/packages/table/src/utils.ts b/packages/table/src/utils.ts
@@ -20,7 +20,7 @@ import { datetimeFormatter } from '@tmagic/form';
 
 import type { ColumnConfig } from './schema';
 
-export const formatter = (item: ColumnConfig, row: any) => {
+export const formatter = (item: ColumnConfig, row: any, data: { index: number }) => {
   if (!item.prop) return '';
 
   if (item.formatter) {
@@ -29,7 +29,7 @@ export const formatter = (item: ColumnConfig, row: any) => {
       item.formatter = (value: string) => datetimeFormatter(value);
     }
     try {
-      return item.formatter(row[item.prop], row);
+      return item.formatter(row[item.prop], row, data);
     } catch (e) {
       return row[item.prop];
     }