feat(form): table支持配置拖动操作中的按钮排序而不是拖动整行

This commit is contained in:
roymondchen 2025-12-01 21:09:11 +08:00
parent 2667981e4c
commit 69ac90fe22
5 changed files with 17 additions and 3 deletions

View File

@ -721,6 +721,7 @@ export interface TableConfig extends FormItem {
defaultSort?: SortProp; defaultSort?: SortProp;
/** 是否支持拖拽排序 */ /** 是否支持拖拽排序 */
dropSort?: boolean; dropSort?: boolean;
dropSortHandle?: boolean;
/** 是否显示全屏按钮 */ /** 是否显示全屏按钮 */
enableFullscreen?: boolean; enableFullscreen?: boolean;
fixed?: boolean | 'left' | 'right'; fixed?: boolean | 'left' | 'right';

View File

@ -1,5 +1,13 @@
<template> <template>
<slot name="operateCol" :scope="{ $index: index, row: row }"></slot> <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>
<TMagicButton <TMagicButton
v-show="showDelete(index + 1 + currentPage * pageSize - 1)" v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
size="small" size="small"
@ -24,7 +32,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject } from 'vue'; import { inject } from 'vue';
import { Delete, DocumentCopy } 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 } from '@tmagic/design';

View File

@ -8,7 +8,11 @@
> >
<div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }"> <div class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
<span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span> <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true"> <TMagicTooltip
content="拖拽可排序"
placement="left-start"
:disabled="config.dropSort !== true && !config.dropSortHandle"
>
<TMagicTable <TMagicTable
v-if="model[modelName]" v-if="model[modelName]"
ref="tMagicTable" ref="tMagicTable"

View File

@ -30,6 +30,7 @@ export const useSortable = (
filter: 'input', // 表单组件选字操作和触发拖拽会冲突,优先保证选字操作 filter: 'input', // 表单组件选字操作和触发拖拽会冲突,优先保证选字操作
preventOnFilter: false, // 允许选字 preventOnFilter: false, // 允许选字
direction: 'vertical', direction: 'vertical',
handle: props.config.dropSortHandle ? '.tmagic-form-table-drag-target' : undefined,
onEnd: ({ newIndex, oldIndex }: SortableEvent) => { onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
if (typeof newIndex === 'undefined') return; if (typeof newIndex === 'undefined') return;
if (typeof oldIndex === 'undefined') return; if (typeof oldIndex === 'undefined') return;

View File

@ -111,7 +111,7 @@ export const useTableColumns = (
props: { props: {
label: '操作', label: '操作',
fixed: actionFixed, fixed: actionFixed,
width: props.config.operateColWidth || 112, width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
align: 'center', align: 'center',
}, },
cell: ({ row, $index }: any) => cell: ({ row, $index }: any) =>