JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-12-03 08:22:09 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/form-schema/src/base.ts
View File

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

23
packages/form/src/table/ActionsColumn.vue
View File

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

2
packages/form/src/table/Table.vue
View File

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

5
packages/form/src/table/useSortable.ts
View File

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

4
packages/form/src/theme/table.scss
View File

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