feat(table): action新增tooltip配置

This commit is contained in:
roymondchen 2023-08-25 11:45:57 +08:00
parent 54ec6de4f2
commit 5c9fd9a0f4
2 changed files with 19 additions and 11 deletions

View File

@ -1,18 +1,24 @@
<template> <template>
<TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed"> <TMagicTableColumn :label="config.label" :width="config.width" :fixed="config.fixed">
<template v-slot="scope"> <template v-slot="scope">
<TMagicButton <TMagicTooltip
v-for="(action, actionIndex) in config.actions" v-for="(action, actionIndex) in config.actions"
:placement="action.tooltipPlacement || 'top'"
:key="actionIndex"
:disabled="!Boolean(action.tooltip)"
:content="action.tooltip"
>
<TMagicButton
v-show="display(action.display, scope.row) && !editState[scope.$index]" v-show="display(action.display, scope.row) && !editState[scope.$index]"
class="action-btn" class="action-btn"
text text
:type="action.buttonType || 'primary'"
size="small" size="small"
:type="action.buttonType || 'primary'"
:icon="action.icon" :icon="action.icon"
:key="actionIndex"
@click="actionHandler(action, scope.row, scope.$index)" @click="actionHandler(action, scope.row, scope.$index)"
><span v-html="formatter(action.text, scope.row)"></span ><span v-html="formatter(action.text, scope.row)"></span
></TMagicButton> ></TMagicButton>
</TMagicTooltip>
<TMagicButton <TMagicButton
class="action-btn" class="action-btn"
v-show="editState[scope.$index]" v-show="editState[scope.$index]"
@ -36,7 +42,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { TMagicButton, tMagicMessage, TMagicTableColumn } from '@tmagic/design'; import { TMagicButton, tMagicMessage, TMagicTableColumn, TMagicTooltip } from '@tmagic/design';
import { ColumnActionConfig, ColumnConfig } from './schema'; import { ColumnActionConfig, ColumnConfig } from './schema';

View File

@ -24,6 +24,8 @@ export interface ColumnActionConfig {
display?: (row: any) => boolean; display?: (row: any) => boolean;
text: string | ((row: any) => string); text: string | ((row: any) => string);
name: string; name: string;
tooltip?: string;
tooltipPlacement?: string;
icon?: any; icon?: any;
handler?: (row: any, index: number) => Promise<any> | any; handler?: (row: any, index: number) => Promise<any> | any;
before?: (row: any, index: number) => void; before?: (row: any, index: number) => void;