JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-04 23:06:31 +08:00
Code Issues Projects Releases Wiki Activity

feat(table): formatter添加index信息

Browse Source
This commit is contained in:
roymondchen 2025-02-18 19:46:00 +08:00
parent 6f2c6b151d
commit 4d77b669ba
4 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/table/src/PopoverColumn.vue
View File

@ -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>

8
packages/table/src/TextColumn.vue
View File

@ -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>

2
packages/table/src/schema.ts
View File

@ -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'

4
packages/table/src/utils.ts
View File

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