mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-05 17:52:11 +08:00
feat(form): table支持配置拖动操作中的按钮排序而不是拖动整行
This commit is contained in:
parent
2667981e4c
commit
69ac90fe22
@ -721,6 +721,7 @@ export interface TableConfig extends FormItem {
|
||||
defaultSort?: SortProp;
|
||||
/** 是否支持拖拽排序 */
|
||||
dropSort?: boolean;
|
||||
dropSortHandle?: boolean;
|
||||
/** 是否显示全屏按钮 */
|
||||
enableFullscreen?: boolean;
|
||||
fixed?: boolean | 'left' | 'right';
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<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>
|
||||
<TMagicButton
|
||||
v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
|
||||
size="small"
|
||||
@ -24,7 +32,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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 { TMagicButton } from '@tmagic/design';
|
||||
|
||||
@ -8,7 +8,11 @@
|
||||
>
|
||||
<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>
|
||||
<TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
|
||||
<TMagicTooltip
|
||||
content="拖拽可排序"
|
||||
placement="left-start"
|
||||
:disabled="config.dropSort !== true && !config.dropSortHandle"
|
||||
>
|
||||
<TMagicTable
|
||||
v-if="model[modelName]"
|
||||
ref="tMagicTable"
|
||||
|
||||
@ -30,6 +30,7 @@ export const useSortable = (
|
||||
filter: 'input', // 表单组件选字操作和触发拖拽会冲突,优先保证选字操作
|
||||
preventOnFilter: false, // 允许选字
|
||||
direction: 'vertical',
|
||||
handle: props.config.dropSortHandle ? '.tmagic-form-table-drag-target' : undefined,
|
||||
onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
|
||||
if (typeof newIndex === 'undefined') return;
|
||||
if (typeof oldIndex === 'undefined') return;
|
||||
|
||||
@ -111,7 +111,7 @@ export const useTableColumns = (
|
||||
props: {
|
||||
label: '操作',
|
||||
fixed: actionFixed,
|
||||
width: props.config.operateColWidth || 112,
|
||||
width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
|
||||
align: 'center',
|
||||
},
|
||||
cell: ({ row, $index }: any) =>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user