mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-03 00:08:07 +08:00
feat(form): table支持配置操作按钮的icon
This commit is contained in:
parent
69ac90fe22
commit
0dd7f54ebc
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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]"
|
||||
|
||||
@ -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;
|
||||
});
|
||||
},
|
||||
|
||||
@ -65,4 +65,8 @@
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tmagic-form-table-drag-target {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user