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;
|
defaultSort?: SortProp;
|
||||||
/** 是否支持拖拽排序 */
|
/** 是否支持拖拽排序 */
|
||||||
dropSort?: boolean;
|
dropSort?: boolean;
|
||||||
|
dropSortHandle?: boolean;
|
||||||
/** 是否显示全屏按钮 */
|
/** 是否显示全屏按钮 */
|
||||||
enableFullscreen?: boolean;
|
enableFullscreen?: boolean;
|
||||||
fixed?: boolean | 'left' | 'right';
|
fixed?: boolean | 'left' | 'right';
|
||||||
|
|||||||
@ -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';
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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) =>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user