feat(form): table支持配置操作按钮的icon

This commit is contained in:
roymondchen 2025-12-02 15:25:34 +08:00
parent 69ac90fe22
commit 0dd7f54ebc
5 changed files with 22 additions and 15 deletions

View File

@ -722,6 +722,9 @@ export interface TableConfig extends FormItem {
/** 是否支持拖拽排序 */
dropSort?: boolean;
dropSortHandle?: boolean;
dropActionButtonIcon?: any;
copyActionButtonIcon?: any;
deleteActionButtonIcon?: any;
/** 是否显示全屏按钮 */
enableFullscreen?: boolean;
fixed?: boolean | 'left' | 'right';

View File

@ -1,20 +1,21 @@
<template>
<slot name="operateCol" :scope="{ $index: index, row: row }"></slot>
<TMagicButton
v-if="config.dropSort && config.dropSortHandle"
:class="{ 'tmagic-form-table-drag-target': config.dropSortHandle }"
:icon="Sort"
link
size="small"
title="拖动排序"
></TMagicButton>
<TMagicTooltip v-if="config.dropSort && config.dropSortHandle" content="拖动排序" placement="left-start">
<TMagicButton
size="small"
link
:class="{ 'tmagic-form-table-drag-target': config.dropSortHandle }"
:icon="config.dropActionButtonIcon || Sort"
>
</TMagicButton>
</TMagicTooltip>
<TMagicButton
v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
size="small"
type="danger"
link
title="删除"
:icon="Delete"
:icon="config.deleteActionButtonIcon || Delete"
@click="removeHandler(index + 1 + currentPage * pageSize - 1)"
></TMagicButton>
@ -24,7 +25,7 @@
size="small"
type="primary"
title="复制"
:icon="DocumentCopy"
:icon="config.copyActionButtonIcon || DocumentCopy"
:disabled="disabled"
@click="copyHandler(index + 1 + currentPage * pageSize - 1)"
></TMagicButton>
@ -35,7 +36,7 @@ import { inject } from 'vue';
import { Delete, DocumentCopy, Sort } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash-es';
import { TMagicButton } from '@tmagic/design';
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import type { FormState, TableConfig } from '../schema';

View File

@ -11,7 +11,7 @@
<TMagicTooltip
content="拖拽可排序"
placement="left-start"
:disabled="config.dropSort !== true && !config.dropSortHandle"
:disabled="config.dropSort !== true || config.dropSortHandle"
>
<TMagicTable
v-if="model[modelName]"

View File

@ -39,10 +39,9 @@ export const useSortable = (
emit('change', newData);
mForm?.$emit('field-change', newData);
sortable?.destroy();
sortable = undefined;
nextTick(() => {
sortable?.destroy();
sortable = undefined;
updateKey.value += 1;
});
},

View File

@ -65,4 +65,8 @@
.el-form-item {
margin-bottom: 0;
}
.tmagic-form-table-drag-target {
cursor: move;
}
}