mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-05-06 10:35:15 +08:00
feat(table): action新增tooltip配置
This commit is contained in:
parent
54ec6de4f2
commit
5c9fd9a0f4
@ -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';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user