From 4d77b669baf68f3346aa64d52dea6f75712b1af4 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 18 Feb 2025 19:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(table):=20formatter=E6=B7=BB=E5=8A=A0index?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/table/src/PopoverColumn.vue | 4 +++-
 packages/table/src/TextColumn.vue    | 8 ++++----
 packages/table/src/schema.ts         | 2 +-
 packages/table/src/utils.ts          | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/table/src/PopoverColumn.vue b/packages/table/src/PopoverColumn.vue
index 531b1a65..c38a49c1 100644
--- 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
index 231e3f21..b9448c1e 100644
--- 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
index 6b70e256..76753643 100644
--- 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
index 0eb34aba..b6456c90 100644
--- 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];
     }